Resource Pages

Open source

Authenticated resource workflows — searchable and selectable index, create, edit, and detail pages with activity history, plus the operator set: an alert-led index, a waiting-for work queue, a stepped record and one create/edit form with save blockers.

4 of 8

resources/views/pages/resource-page-detail.blade.php Blade

@props([
    'title'       => 'Mobile application',
    'subtitle'    => 'A customer-facing product project.',
    'status'      => 'Active',
    'statusTone'  => 'success',
    'indexHref'   => '#',
    'editHref'    => '#',
    'fields'      => null,
    'activity'    => null,
    // Opt-in enrichments below. Every one defaults to null, so a caller who
    // passes none of them — and no `banner` slot — gets the exact record
    // screen this page has always rendered. Generalised from the Noord-C
    // admin's `v2/orders/show.blade.php`.
    //
    // ['previous' => ['href','label'=>null], 'next' => [...], 'position' => '3 of 47']
    // — previous/next stepping so working a list means working its records in
    // sequence, without a trip back through the index between them.
    'recordNavigation' => null,
    // [['label','href'=>null,'action'=>null,'method'=>'POST','variant'=>null,
    //   'primary'=>false,'disabled'=>false,'reason'=>null], ...]
    // A record action cluster, replacing the single Edit button below. An
    // action the viewer may not take at all must be OMITTED from this array
    // by the caller — never included with `disabled`. `disabled` + `reason`
    // is reserved for a workflow the record's own state blocks right now
    // (Noord-C's `enabled: false` case): the control still renders, greyed
    // out, naming the rule that blocks it.
    'actions' => null,
    // [['value','label','tone'=>'soft-success'|'soft-warning'|'soft-destructive'|'soft-info'|'soft-neutral','url'=>null], ...]
    // When set, the status pill becomes a `status-select` the operator
    // can change; when null the status stays a plain, non-interactive badge.
    'statusOptions' => null,
])

@php
    $fields ??= [
        ['label' => 'Owner', 'value' => 'Maya Chen'],
        ['label' => 'Team', 'value' => 'Product development'],
        ['label' => 'Created', 'value' => 'June 12, 2026'],
        ['label' => 'Last updated', 'value' => '12 minutes ago'],
        ['label' => 'Reference', 'value' => 'PRJ-0101'],
        ['label' => 'Visibility', 'value' => 'Workspace members'],
    ];

    $activity ??= [
        ['actor' => 'Maya Chen', 'initials' => 'MC', 'action' => 'changed the status to', 'target' => 'Active', 'time' => '12 minutes ago', 'datetime' => '2026-08-22T10:48:00+02:00'],
        ['actor' => 'Noah Williams', 'initials' => 'NW', 'action' => 'added a project note', 'target' => 'API handoff is ready for review.', 'time' => 'Yesterday', 'datetime' => '2026-08-21T15:20:00+02:00'],
        ['actor' => 'Maya Chen', 'initials' => 'MC', 'action' => 'created this project', 'target' => '', 'time' => 'June 12, 2026', 'datetime' => '2026-06-12T09:00:00+02:00'],
    ];
@endphp

<main
    id="main-content"
    data-slot="resource-detail-page"
    data-surface="admin"
    data-visual-contracts="VC-006"
    {{ $attributes->merge(['class' => 'min-h-screen bg-background px-4 py-8 text-foreground sm:px-6']) }}
>
    <div class="mx-auto max-w-6xl">
        <x-ui.breadcrumb>
            <x-ui.breadcrumb.list>
                <x-ui.breadcrumb.item>
                    <x-ui.breadcrumb.link :href="$indexHref">{{ __('Projects') }}</x-ui.breadcrumb.link>
                </x-ui.breadcrumb.item>
                <x-ui.breadcrumb.separator />
                <x-ui.breadcrumb.item>
                    <x-ui.breadcrumb.page>{{ __($title) }}</x-ui.breadcrumb.page>
                </x-ui.breadcrumb.item>
            </x-ui.breadcrumb.list>
        </x-ui.breadcrumb>
@if ($recordNavigation)
        <nav
            data-slot="resource-detail-navigation"
            aria-label="{{ __('Record navigation') }}"
            class="mt-2 flex flex-wrap items-center gap-2"
        >
            @if (! empty($recordNavigation['position']))
                <span class="text-xs text-muted-foreground">{{ $recordNavigation['position'] }}</span>
            @endif
            <x-ui.button
                :href="$recordNavigation['previous']['href'] ?? null"
                variant="outline"
                size="sm"
                :disabled="empty($recordNavigation['previous']['href'] ?? null)"
                :icon-label="__('Previous record')"
            >
                <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M15 18l-6-6 6-6" />
                </svg>
            </x-ui.button>
            <x-ui.button
                :href="$recordNavigation['next']['href'] ?? null"
                variant="outline"
                size="sm"
                :disabled="empty($recordNavigation['next']['href'] ?? null)"
                :icon-label="__('Next record')"
            >
                <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 18l6-6-6-6" />
                </svg>
            </x-ui.button>
        </nav>
@endif
@if (isset($banner) && ! $banner->isEmpty())
        <div data-slot="resource-detail-banner" class="mt-4">
            {{ $banner }}
        </div>
@endif

        <header class="mt-4 flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-start sm:justify-between">
            <div class="min-w-0">
                <div class="flex flex-wrap items-center gap-2">
                    <h1 class="text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($title) }}</h1>
@if ($statusOptions !== null)
                    <x-ui.status-select :value="$status" :options="$statusOptions" />
@else
                    <x-ui.badge :variant="$statusTone">{{ __($status) }}</x-ui.badge>
@endif
                </div>
                <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($subtitle) }}</p>
            </div>

@if ($actions !== null)
            <div data-slot="resource-detail-actions" class="flex shrink-0 flex-wrap items-center gap-2">
                @foreach ($actions as $action)
                    @php
                        $actionVariant = $action['variant'] ?? (! empty($action['primary']) ? 'default' : 'outline');
                        $actionBlocked = ! empty($action['disabled']);
                        $actionReasonId = 'resource-detail-action-reason-'.$loop->index;
                    @endphp
                    @if ($actionBlocked)
                        <span class="inline-flex" title="{{ $action['reason'] ?? '' }}">
                            <x-ui.button :variant="$actionVariant" size="sm" disabled :aria-describedby="$actionReasonId">
                                {{ $action['label'] ?? '' }}
                            </x-ui.button>
                        </span>
                        <span id="{{ $actionReasonId }}" class="sr-only">{{ $action['reason'] ?? '' }}</span>
                    @elseif (! empty($action['action']))
                        <x-ui.form :method="$action['method'] ?? 'POST'" :action="$action['action']" class="!space-y-0">
                            <x-ui.button :variant="$actionVariant" size="sm" type="submit">
                                {{ $action['label'] ?? '' }}
                            </x-ui.button>
                        </x-ui.form>
                    @else
                        <x-ui.button :variant="$actionVariant" size="sm" :href="$action['href'] ?? '#'">
                            {{ $action['label'] ?? '' }}
                        </x-ui.button>
                    @endif
                @endforeach
            </div>
@else
            <x-ui.button :href="$editHref" variant="secondary" class="shrink-0">
                <x-slot:icon>
                    <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="M12 20h9" />
                        <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z" />
                    </svg>
                </x-slot:icon>
                {{ __('Edit project') }}
            </x-ui.button>
@endif
        </header>

        <div class="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(20rem,0.72fr)] lg:items-start">
            <x-ui.card>
                <x-ui.card.header>
                    <x-ui.card.title>{{ __('Overview') }}</x-ui.card.title>
                    <x-ui.card.description>{{ __('Core information for this resource.') }}</x-ui.card.description>
                </x-ui.card.header>
                <x-ui.card.content>
                    <dl class="divide-y divide-border">
                        @foreach ($fields as $field)
                            <div class="grid gap-2 py-4 first:pt-0 last:pb-0 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-6">
                                <dt class="text-sm font-medium text-muted-foreground">{{ __($field['label']) }}</dt>
                                <dd class="min-w-0 break-words text-sm text-foreground">{{ $field['value'] }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    @if (! $slot->isEmpty())
                        <x-ui.separator class="my-6" />
                        {{ $slot }}
                    @endif
                </x-ui.card.content>
            </x-ui.card>

            <x-ui.card>
                <x-ui.card.header>
                    <x-ui.card.title>{{ __('Activity') }}</x-ui.card.title>
                    <x-ui.card.description>{{ __('Recent changes and collaboration history.') }}</x-ui.card.description>
                </x-ui.card.header>
                <x-ui.card.content>
                    <x-ui.audit-log
                        variant="plain"
                        :grouped="false"
                        :label="__('Resource activity')"
                        :empty-label="__('No activity has been recorded yet.')"
                        :events="collect($activity)->map(fn (array $event): array => [
                            'actor' => ['name' => $event['actor'] ?? '', 'initials' => $event['initials'] ?? ''],
                            'action' => __($event['action'] ?? ''),
                            'subject' => $event['target'] ?? '',
                            'at' => $event['datetime'] ?? null,
                        ])->all()"
                    />
                </x-ui.card.content>
            </x-ui.card>
        </div>
    </div>
</main>

Installation

terminal

php artisan ui:add pages/resource-page-detail

Installs these dependencies automatically:

breadcrumb button badge card separator avatar form status-select audit-log

Registry contract

Install confidence

php artisan ui:add pages/resource-page-detail 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.2.4
License: open
Stability: stable
Contract: v2
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/pages/resource-page-detail.blade.php

Registry dependencies

breadcrumb button badge card separator avatar form status-select audit-log

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.

resource-page-detail.md

# Brok UI page: Resource Detail (`resource-page-detail`)

A generic authenticated resource detail page with breadcrumbs, status and edit actions, structured metadata, optional related content, and a responsive activity timeline. Optionally composes previous/next record stepping, an attention banner, a full record action cluster, and a changeable status.

Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add pages/resource-page-detail
```

## Render it

```blade
<x-pages.resource-page-detail />
```

## Props

- `title` (string, default `Mobile application`) — Resource title and page heading.
- `subtitle` (string, default `A customer-facing product project.`) — Resource summary.
- `status` (string, default `Active`) — Visible status label.
- `status-tone` (string, default `success`) — Badge variant for the status. Ignored once `statusOptions` is set.
- `index-href` (string, default `#`) — Resource index destination.
- `fields` (array|null, default `null`) — Label and value pairs for resource metadata.
- `activity` (array|null, default `null`) — Chronological actor, action, target, time, datetime, and initials entries.
- `edit-href` (string, default `#`) — Edit-page destination. Ignored once `actions` is set.
- `record-navigation` (array|null, default `null`) — ['previous'=>['href','label'=>null],'next'=>[...],'position'=>'3 of 47'] — previous/next record stepping so working a list means working its records in sequence.
- `actions` (array|null, default `null`) — A record action cluster replacing the single Edit button: [['label','href'=>null,'action'=>null,'method'=>'POST','variant'=>null,'primary'=>false,'disabled'=>false,'reason'=>null]]. An action the viewer may not take at all must be omitted by the caller — never included with `disabled`; `disabled`+`reason` is reserved for a workflow the record's own state currently blocks.
- `status-options` (array|null, default `null`) — [['value','label','tone'=>'soft-success'|'soft-warning'|'soft-destructive'|'soft-info'|'soft-neutral','url'=>null]] — when set, the status pill becomes an <x-ui.status-select> the operator can change; when null the status stays a plain, non-interactive badge.

## Use when

- Use as the show route for a resource that needs overview data and a chronological audit or collaboration feed.

## Avoid when

- Use description-list-detail alone when the resource has no page actions or activity history.

## Rules

- Render the installed page with `<x-pages.resource-page-detail />` 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/pages/resource-page-detail
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/resource-page-detail.json

Ask about Resource Detail 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

Use as the show route for a resource that needs overview data and a chronological audit or collaboration feed.

Avoid when

Use description-list-detail alone when the resource has no page actions or activity history.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: breadcrumb record navigation attention banner status header record actions overview card metadata list optional related content activity timeline
Theming hooks: Uses the admin surface and semantic design tokens.

Usage

Render the page as a component, or wire it to a route. Pass data where useful:

resources/views/welcome.blade.php Blade

<x-pages.resource-page-detail />

Built from blocks & primitives

This page 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 pages.