Skip to content
Brok UI

Loading…

No results

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.

3 of 8

Preview

resources/views/pages/resource-page-edit.blade.php Blade
@props([
    'title'        => 'Edit project',
    'description'  => 'Update project details, status, or ownership.',
    'indexHref'    => '#',
    'detailHref'   => '#',
    'action'       => '#',
    'deleteAction' => '#',
    'values'       => null,
    'statusMessage' => null,
    'failureMessage' => null,
    'loadingLabel' => 'Saving…',
    'dirtyGuard' => true,
])

<main
    id="main-content"
    data-slot="resource-edit-page"
    data-surface="admin"
    {{ $attributes->merge(['class' => 'min-h-screen bg-background px-4 py-8 text-foreground sm:px-6']) }}
>
    <div class="mx-auto mb-6 max-w-3xl">
        <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.link :href="$detailHref">{{ __($values['name'] ?? 'Mobile application') }}</x-ui.breadcrumb.link>
                </x-ui.breadcrumb.item>
                <x-ui.breadcrumb.separator />
                <x-ui.breadcrumb.item>
                    <x-ui.breadcrumb.page>{{ __('Edit') }}</x-ui.breadcrumb.page>
                </x-ui.breadcrumb.item>
            </x-ui.breadcrumb.list>
        </x-ui.breadcrumb>

        <h1 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($title) }}</h1>
        <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
    </div>

    <x-blocks.resource-form-create-edit
        mode="edit"
        :action="$action"
        :cancel-href="$detailHref"
        :delete-action="$deleteAction"
        :values="$values"
        :status-message="$statusMessage"
        :failure-message="$failureMessage"
        :loading-label="$loadingLabel"
        :dirty-guard="$dirtyGuard"
        title="Project details"
        submit-label="Save changes"
        delete-label="Delete project"
    >
        @if (! $slot->isEmpty())
            {{ $slot }}
        @endif
    </x-blocks.resource-form-create-edit>
</main>

Installation

terminal
php artisan ui:add pages/resource-page-edit

Installs these dependencies automatically:

Registry contract

Install confidence

php artisan ui:add pages/resource-page-edit 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.1.3
License
open
Stability
stable
Contract
v2
Foundation
≥ 1.0.0
Type Generated target
blade resources/views/pages/resource-page-edit.blade.php

Registry dependencies

breadcrumb blocks/resource-form-create-edit

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-edit.md
# Brok UI page: Edit Resource (`resource-page-edit`)

A source-bearing edit page with current values, Laravel update handling, submit progress, unsaved-change protection, outcome feedback, and destructive confirmation.

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-edit
```

## Render it

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

## Props

- `title` (string, default `Edit project`) — Page heading.
- `description` (string, default `Update project details, status, or ownership.`) — Page description.
- `index-href` (string, default `#`) — Resource index destination.
- `detail-href` (string, default `#`) — Resource detail and cancel destination.
- `action` (string, default `#`) — PATCH action for updates.
- `delete-action` (string|null, default `#`) — DELETE action; set null to hide the danger zone.
- `values` (array|null, default `null`) — Current values for the shared resource form.
- `status-message` (string|null, default `null`) — Success feedback after a redirect.
- `failure-message` (string|null, default `null`) — Non-validation failure feedback.
- `loading-label` (string, default `Saving…`) — Submit progress label.
- `dirty-guard` (bool, default `true`) — Enables the unsaved-change browser warning.

## Use when

- Use as the edit route for a standard authenticated application resource.

## Avoid when

- Use inline editing, composing resource-form-create-edit directly on resource-page-detail, when changes are small, reversible, and do not need a dedicated page.

## Rules

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

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 edit route for a standard authenticated application resource.

Avoid when

  • Use inline editing, composing resource-form-create-edit directly on resource-page-detail, when changes are small, reversible, and do not need a dedicated page.

Anti-patterns

  • Do not replace semantic props with conflicting utility classes.
  • Do not remove labels, focus styles, or state attributes.
Anatomy
breadcrumb page heading current-value form save actions danger zone delete confirmation
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-edit />

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.

resources/views/pages/resource-page-edit.blade.php Blade
@props([
    'title'        => 'Edit project',
    'description'  => 'Update project details, status, or ownership.',
    'indexHref'    => '#',
    'detailHref'   => '#',
    'action'       => '#',
    'deleteAction' => '#',
    'values'       => null,
    'statusMessage' => null,
    'failureMessage' => null,
    'loadingLabel' => 'Saving…',
    'dirtyGuard' => true,
])

<main
    id="main-content"
    data-slot="resource-edit-page"
    data-surface="admin"
    {{ $attributes->merge(['class' => 'min-h-screen bg-background px-4 py-8 text-foreground sm:px-6']) }}
>
    <div class="mx-auto mb-6 max-w-3xl">
        <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.link :href="$detailHref">{{ __($values['name'] ?? 'Mobile application') }}</x-ui.breadcrumb.link>
                </x-ui.breadcrumb.item>
                <x-ui.breadcrumb.separator />
                <x-ui.breadcrumb.item>
                    <x-ui.breadcrumb.page>{{ __('Edit') }}</x-ui.breadcrumb.page>
                </x-ui.breadcrumb.item>
            </x-ui.breadcrumb.list>
        </x-ui.breadcrumb>

        <h1 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($title) }}</h1>
        <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
    </div>

    <x-blocks.resource-form-create-edit
        mode="edit"
        :action="$action"
        :cancel-href="$detailHref"
        :delete-action="$deleteAction"
        :values="$values"
        :status-message="$statusMessage"
        :failure-message="$failureMessage"
        :loading-label="$loadingLabel"
        :dirty-guard="$dirtyGuard"
        title="Project details"
        submit-label="Save changes"
        delete-label="Delete project"
    >
        @if (! $slot->isEmpty())
            {{ $slot }}
        @endif
    </x-blocks.resource-form-create-edit>
</main>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.1.3
Status
Stable
License
open
Deprecation
Not deprecated
Contract
v2
Foundation
≥ 1.0.0