"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Avatar } from "./avatar"; import { Badge } from "./badge"; import { BulkActionBar } from "./bulk-action-bar"; import { Button } from "./button"; import { Checkbox } from "./checkbox"; import { SearchInput } from "./search-input"; import { Select } from "./select"; import { toast } from "./toast"; import { DownloadIcon, MailIcon, TrashIcon, UserPlusIcon, UserXIcon } from "@kineticui/icons"; type User = { id: string; name: string; email: string; role: "Owner" | "Admin" | "Member" | "Viewer"; status: "Active" | "Invited" | "Suspended"; last: string; color: string }; const seed: User[] = [ { id: "1", name: "Maya Kapoor", email: "maya@kinetic.dev", role: "Owner", status: "Active", last: "now", color: "#C6F432" }, { id: "2", name: "Lena Ortiz", email: "lena@kinetic.dev", role: "Admin", status: "Active", last: "2h ago", color: "#f9a8d4" }, { id: "3", name: "Arjun Mehta", email: "arjun@kinetic.dev", role: "Member", status: "Active", last: "5h ago", color: "#7dd3fc" }, { id: "4", name: "Sam Okafor", email: "sam@kinetic.dev", role: "Member", status: "Active", last: "Yesterday", color: "#fcd34d" }, { id: "5", name: "Noor Haddad", email: "noor@kinetic.dev", role: "Viewer", status: "Invited", last: "—", color: "#a78bfa" }, { id: "6", name: "Kenji Sato", email: "kenji@kinetic.dev", role: "Member", status: "Suspended", last: "3 weeks ago", color: "#34d399" }, { id: "7", name: "Ines Moreau", email: "ines@kinetic.dev", role: "Admin", status: "Active", last: "10m ago", color: "#fb923c" }, ]; const statusVariant = { Active: "success", Invited: "info", Suspended: "danger" } as const; /** User management table: search, role/status filters, inline role change, row selection with a bulk action bar. */ export function AdminUsers() { const [users, setUsers] = React.useState(seed); const [q, setQ] = React.useState(""); const [status, setStatus] = React.useState("all"); const [sel, setSel] = React.useState>(new Set()); const list = users.filter((u) => (status === "all" || u.status === status) && `${u.name} ${u.email}`.toLowerCase().includes(q.toLowerCase())); const allSel = list.length > 0 && list.every((u) => sel.has(u.id)); const toggle = (id: string) => setSel((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; }); return (

Users

{users.length} people in your workspace

{ setUsers((us) => us.map((x) => (x.id === u.id ? { ...x, role: e.target.value as User["role"] } : x))); toast.success(`${u.name.split(" ")[0]} is now ${e.target.value}`); }} className="h-8 rounded-lg border border-border bg-background px-2 text-sm outline-none focus:border-accent"> {["Admin", "Member", "Viewer"].map((r) => )} )} {u.status} {u.last} ))} {!list.length ?

No users match.

: null}

setSel(new Set(list.map((u) => u.id)))} onClear={() => setSel(new Set())} actions={[ { id: "mail", label: "Email", icon: , onClick: () => toast.info(`Composing to ${sel.size}`) }, { id: "export", label: "Export", icon: , onClick: () => toast.success("CSV exported") }, { id: "suspend", label: "Suspend", icon: , onClick: () => { setUsers((us) => us.map((u) => (sel.has(u.id) && u.role !== "Owner" ? { ...u, status: "Suspended" } : u))); setSel(new Set()); } }, { id: "remove", label: "Remove", icon: , destructive: true, onClick: () => { setUsers((us) => us.filter((u) => !sel.has(u.id) || u.role === "Owner")); toast.error(`Removed ${sel.size} users`); setSel(new Set()); } }, ]} />

); }

Admin Users

Installation