Admin Commerce — Allowed

This gauge covers Chapter 20: operator ecommerce layouts and table chrome after Storefront, Admin UI, and Tables.

Learning goal

Compose admin commerce surfaces — table variants, ops table toolbars, add-product forms, list pages, and entity detail panels — while keeping native controls and accessible names. Interactive search, sort, pagination, and bulk select wait for JavaScript Phase 9.

Inherited tools

Everything allowed through ../storefront/allowed.md and ../admin-ui/allowed.md remains available, including forms, tables, dashboard shells, dropzones, and input groups from earlier chapters.

New presentation patterns

• Table variants: striped, hover, bordered, and compact modifiers
• Ops table chrome: toolbar, status pills, static row-action menus, scroll region
• Add-product compose: main details column plus pricing and stock sidebar
• Shipping type as radio cards with helper copy
• Admin list page: shell, static search toolbar, data table, pagination chrome
• Entity detail: header, card sections, related table

Learning rules

1. Table modifiers change presentation only. Keep caption, thead/tbody, and scope from Chapter 13.
2. Status pills communicate state with text as well as colour.
3. Row-action menus may be static open markup in this chapter. Opening them with script belongs to JavaScript.
4. Pagination links and search inputs may be non-functional chrome. Wiring them belongs to JavaScript Phase 9 (List.js).
5. Add-product pricing fields may reuse input-group prefixes and suffixes from Chapter 12.
6. Prefer one elevation system on the admin canvas, matching Chapter 18.
7. Dropzone chrome still wraps a real file input.
8. Prefer CSS variables for surface, border, muted text, success, and danger.

Not allowed

• JavaScript for sorting, searching, pagination, bulk select, or menus
• Third-party table libraries (List.js). Learn those in JavaScript Phase 9
• Custom controls that replace native inputs, selects, textareas, or buttons
• Essential instructions shown only in placeholders
• Positive tabindex values except the inherited table scroll wrapper pattern
• Inline styles
• Any HTML or CSS not inherited or listed for presentation above

Pages

• 01-table-variants.html — striped, hover, bordered, compact tables
• 02-ops-table-chrome.html — toolbar, status pills, row actions, scroll
• 03-add-product.html — two-column product compose form
• 04-admin-list-page.html — shell, search chrome, table, pagination chrome
• 05-entity-detail.html — customer or order detail panels

Rules to lean on

Rules 2, 10, 99–110, 111–122, 175–195, storefront rules, and admin commerce rules added for Chapter 20.