Admin Panel

@zerotal/admin is a Filament-style admin panel for Zerotal. You describe each model with a Resource class — its table columns, form fields, infolist entries, filters, actions, and relations — and the panel renders fully reactive CRUD pages.

It is server-driven: pages are @zerotal/flow components and the UI is built from @zerotal/flow-ui, so sorting, filtering, inline edits, modals, and live notifications all round-trip over Flow's WebSocket morph with no client store to maintain. Light + dark mode ship out of the box.

Note — This is the current, class-based admin. The earlier zero-config Admin.register(Model) panel has been retired; it remains available in pre-1.1 releases (and on the admin-legacy git tag) if you need to reference it.

Getting Started

bun add @zerotal/admin

The panel renders with Flow and flow-ui, and reads/writes through your @zerotal/orm models. @zerotal/auth is an optional peer — needed only if you enable the built-in auth pages.

Register the providers

Add AdminProvider after FlowProvider (which installs the Router.flow() macro and the WebSocket runtime the pages depend on):

// bootstrap/providers.ts
import { FlowProvider } from "@zerotal/flow";
import { AdminProvider } from "@zerotal/admin";

export default [FlowProvider, AdminProvider];

On boot the provider auto-discovers app/admin.ts (where you configure the panel and register resources), then mounts the dashboard, search, notifications, and a List / View / Create / Edit page per resource under the configured path.

Quick start

// app/admin.ts
import { Panel, Resource, text, textInput } from "@zerotal/admin";
import { User } from "./models/User.ts";

Panel.configure({ brand: "Acme", path: "/admin" });

class UserResource extends Resource {
  static model = User;
  static navigationIcon = "users";
  static navigationGroup = "Access";

  static columns() {
    return [
      text("id").sortable(),
      text("name").searchable().sortable(),
      text("email").searchable().copyable(),
      text("role").badge((v) => (v === "admin" ? "primary" : "muted")),
      text("created_at").label("Joined").sortable(),
    ];
  }

  static form() {
    return [textInput("name").required().maxLength(120), textInput("email").email().required()];
  }
}

Panel.register(UserResource);

Visit /admin. You now have a searchable, sortable, paginated table with Create / Edit / View / Delete — and the form above on the Create and Edit pages.

Danger — The panel is unguarded by default (fine for local exploration). Set middleware in your config before shipping; see Securing the panel.

Configuration

Configure the panel with Panel.configure(...) in app/admin.ts, or by exporting an admin config object the provider merges on boot.

Panel.configure({
  path: "/admin",
  brand: "Acme",
  tagline: "Control panel",
  middleware: [AdminGuard], // guard every panel route
  userMenu: {
    // top-bar identity dropdown
    label: "Jane Doe",
    items: [
      { label: "Profile", href: "/admin/profile", icon: "users" },
      { label: "Sign out", href: "/admin/logout", icon: "logout" },
    ],
  },
  theme: {/* see Theming */},
  auth: {/* see Auth pages */},
});

The rest of the guide

Next steps

• Flow — the reactivity layer the pages are built on.
• Components — the flow-ui kit the panel renders with.
• ORM — the models, relations, and soft-deletes the panel reads.
• Authentication / Authorization — the auth pages and can() policies.