Dashboard Or Admin Tool

Use this shape for dense screens that need repeated scanning, filtering, pagination, and action review.

Recipe docsRecipes

Required Packages

@macavitymadcap/hyper-dank-ui for AppShell, PageHeader, SideNav, Toolbar, HxForm, ScrollableTable, TableCell, Pagination, StatusSummary, Badge, and PopoverMenu.
@macavitymadcap/hyper-dank-transport for GET filters, POST actions, HTMX redirects, and fragment-or-page responses.
@macavitymadcap/hyper-dank-data for provider lifecycle and app-owned repository contracts.
@macavitymadcap/hyper-dank-automation for seeded review flows, screenshots, Pa11y, and browser checks.

import { Button, FormField, HxForm, Panel, ScrollableTable, TableCell } from "@macavitymadcap/hyper-dank-ui";

export function AdminList() {
  return (
    <Panel labelledBy="admin-heading">
      <h2 id="admin-heading">Operations</h2>
      <HxForm action="/admin" method="get" hx-get="/admin" hx-target="#admin-results">
        <FormField id="query" label="Search" name="query" />
        <Button type="submit">Filter</Button>
      </HxForm>
      <ScrollableTable columns={[{ key: "name", header: "Name" }]}>
        <tr className="scrollable-table-row">
          <TableCell value="Build checks" />
        </tr>
      </ScrollableTable>
    </Panel>
  );
}

App-Owned Responsibilities

The app owns domain tables, filter semantics, roles, audit trails, mutations, destructive-action policy, empty states, and seeded review data.

Verification

Use component tests for dense states, route tests for permissions, HTMX tests for filter and mutation fragments, screenshots for light and dark review states, and Pa11y for the main admin route.

References

UI, Transport, Data, Automation, and Storybook dashboard examples.