nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Admin user management table row with avatar, name, email, role badge, verification tier, last active timestamp, and action dropdown (edit role, suspend, delete). Used in all Nyuchi product admin panels.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
interface UserManagementRowProps extends React.ComponentProps<"div"> {
name: string
email: string
avatar?: string
role: string
verificationTier?: 0 | 1 | 2 | 3 | 4
lastActive?: string
status?: "active" | "suspended" | "pending"
onEditRole?: () => void
onSuspend?: () => void
onDelete?: () => void
}
const statusDots = { active: "bg-[var(--color-malachite,#64FFDA)]", suspended: "bg-destructive", pending: "bg-[var(--color-gold,#FFD740)]" }
function UserManagementRow({
name, email, avatar, role, verificationTier, lastActive, status = "active",
onEditRole, onSuspend, onDelete, loading = false, className, ...props
}: UserManagementRowProps) {
return (
<div data-slot="user-management-row" data-portal="https://design.nyuchi.com/components/user-management-row" role="listitem" className={cn("flex items-center gap-3 rounded-[var(--radius-md,12px)] px-3 py-2.5 transition-colors hover:bg-muted/30", className)} {...props}>
<div className="relative shrink-0">
<div className="flex size-9 items-center justify-center rounded-full bg-muted text-xs font-medium">
{avatar ? <img src={avatar} alt="" className="size-full rounded-full object-cover" /> : name.charAt(0)}
</div>
<div className={cn("absolute -bottom-0.5 -right-0.5 size-2 rounded-full border border-background", statusDots[status])} />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium truncate">{name}</span>
{verificationTier !== undefined && verificationTier > 0 && <span className="text-[10px] text-[var(--color-gold,#FFD740)]">✓</span>}
</div>
<div className="text-xs text-muted-foreground truncate">{email}</div>
</div>
<span className="hidden sm:inline rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground capitalize">{role}</span>
{lastActive && <span className="hidden lg:inline text-[10px] text-muted-foreground">{lastActive}</span>}
<div className="flex gap-1">
{onEditRole && <button onClick={onEditRole} className="h-7 rounded-full bg-muted px-2 text-[10px] font-medium transition-colors hover:bg-border">Role</button>}
{onSuspend && <button onClick={onSuspend} className="h-7 rounded-full px-2 text-[10px] font-medium text-[var(--color-gold,#FFD740)] transition-colors hover:bg-[var(--color-gold,#FFD740)]/10">{status === "suspended" ? "Unsuspend" : "Suspend"}</button>}
</div>
</div>
)
}
export { UserManagementRow }
export type { UserManagementRowProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/user-management-rowFetch this component's metadata and source code from the registry API.
/api/v1/ui/user-management-row