AdminUsers

Code

import { AdminUsers, type ManagedUser } from "@fadymondy/nasaq/web";const roles = [{ id: "admin", label: "Admin" }, { id: "member", label: "Member" }];export function Users({ users }: { users: ManagedUser[] }) {  return (    <AdminUsers      users={users}      roles={roles}      currentUserId="u1"      onAddUser={async (values) => { await api.invite(values); }}      onVerify={async (user) => { await api.verify(user.id); }}      onSetDisabled={async (user, disabled) => { await api.disable(user.id, disabled); }}      onResetPassword={async (user) => { await api.reset(user.id); }}      onImpersonate={async (user) => { await api.impersonate(user.id); }}      onUpdateRoles={async (user, next) => { await api.roles(user.id, next); }}    />  );}

Admin · beta

Live examples and controls: AdminUsers in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/admin-users.json

The users screen of a back office. You own the data; every action is an async callback that returns nothing on success or { error }, and you send back new users.

When to useCopy Anchor Link

• Admins who manage other people's accounts.

When not to useCopy Anchor Link

• A user editing their own account: use AccountSettings.

ImportCopy Anchor Link

import { AdminUsers } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { AdminUsers, type ManagedUser } from "@fadymondy/nasaq/web";

const roles = [{ id: "admin", label: "Admin" }, { id: "member", label: "Member" }];

export function Users({ users }: { users: ManagedUser[] }) {
  return (
    <AdminUsers
      users={users}
      roles={roles}
      currentUserId="u1"
      onAddUser={async (values) => { await api.invite(values); }}
      onVerify={async (user) => { await api.verify(user.id); }}
      onSetDisabled={async (user, disabled) => { await api.disable(user.id, disabled); }}
      onResetPassword={async (user) => { await api.reset(user.id); }}
      onImpersonate={async (user) => { await api.impersonate(user.id); }}
      onUpdateRoles={async (user, next) => { await api.roles(user.id, next); }}
    />
  );
}

AnatomyCopy Anchor Link

AdminUsers            data-slot="admin-users"
├─ stat tiles         total, active, unverified, disabled
├─ notice             Alert, dismisses itself after 6 seconds
├─ toolbar            search, facets (status, role, verified), view options, add user
├─ DataTable          selectable; bulk verify and disable; row actions
└─ dialogs            AddUserDialog, UserRolesDialog, confirm dialogs

APICopy Anchor Link

AdminUsersCopy Anchor Link

AddUserDialog and UserRolesDialog are exported for use on their own (open, onOpenChange, roles, onSubmit; and user, roles, onOpenChange, onSave).

AddUserDialogCopy Anchor Link

ExamplesCopy Anchor Link

• Read-only: omit the callbacks; only the table and filters remain.
• Server errors: onAddUser={async () => ({ fieldErrors: { email: "Already registered" } })}.
• Set a password up front: <AddUserDialog password ... />; leave it empty to send an invitation instead.
• Roles without a catalogue: <AddUserDialog roles={[]} ... /> switches to typed roles.

AccessibilityCopy Anchor Link

• Row actions are in a labelled menu per row. Reset password, impersonate and disable ask first in an alert dialog.
• Results appear in a polite alert. Pass labels for other languages.

RTL & i18nCopy Anchor Link

Built-in English and Arabic. Emails are shown in an LTR isolate. Numbers and dates use the locale.

Styling & tokensCopy Anchor Link

Uses StatCard, DataTable and Badge styles. Extend with className.

Do / Don'tCopy Anchor Link

• Do log impersonation on the server and show AdminArea's banner.
• Do not let users disable themselves.
• Known limit: the role facet matches the first role only.

RelatedCopy Anchor Link

• AdminArea
• DataTable
• UserActionsMenu: the same actions for one user, on a detail page.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-admin-admin-users--docs