"use client"; import * as React from "react"; import { motion } from "motion/react"; import { Badge } from "./badge"; import { Button } from "./button"; import { toast } from "./toast"; import { CheckIcon, LockIcon, MinusIcon } from "@kineticui/icons"; const roles = ["Owner", "Admin", "Editor", "Viewer"] as const; type Role = (typeof roles)[number]; const groups: { group: string; perms: { id: string; label: string }[] }[] = [ { group: "Projects", perms: [{ id: "p.view", label: "View projects" }, { id: "p.edit", label: "Edit projects" }, { id: "p.delete", label: "Delete projects" }] }, { group: "Team", perms: [{ id: "t.invite", label: "Invite members" }, { id: "t.roles", label: "Change roles" }] }, { group: "Billing", perms: [{ id: "b.view", label: "View invoices" }, { id: "b.manage", label: "Manage plan" }] }, { group: "Developers", perms: [{ id: "d.keys", label: "Create API keys" }, { id: "d.hooks", label: "Manage webhooks" }] }, ]; const initial: Record = { Owner: groups.flatMap((g) => g.perms.map((p) => p.id)), Admin: ["p.view", "p.edit", "p.delete", "t.invite", "t.roles", "b.view", "d.keys", "d.hooks"], Editor: ["p.view", "p.edit", "t.invite"], Viewer: ["p.view"], }; /** Roles & permissions matrix: toggle cells per role, owner locked, changes tracked with a save bar. */ export function TeamRoles() { const [perms, setPerms] = React.useState(initial); const [saved, setSaved] = React.useState(initial); const dirty = roles.some((r) => perms[r].slice().sort().join() !== saved[r].slice().sort().join()); const changed = (r: Role, id: string) => perms[r].includes(id) !== saved[r].includes(id); const toggle = (r: Role, id: string) => setPerms((p) => ({ ...p, [r]: p[r].includes(id) ? p[r].filter((x) => x !== id) : [...p[r], id] })); return (

Roles & permissions

Control what each role can do in this workspace.

{roles.map((r) => )} {groups.map((g) => ( {g.perms.map((p) => ( {roles.map((r) => { const on = perms[r].includes(p.id); const locked = r === "Owner"; return ( ); })} ))} ))}

Permission	{r} {perms[r].length} perms
{g.group}
{p.label}	toggle(r, p.id)} className={`relative mx-auto flex size-7 items-center justify-center rounded-lg border transition-colors ${on ? "border-accent bg-accent text-accent-foreground" : "border-border-strong text-subtle hover:border-muted"} ${locked ? "cursor-not-allowed opacity-60" : ""} ${changed(r, p.id) ? "ring-2 ring-warning ring-offset-2 ring-offset-background" : ""}`} > {locked ? : on ? : }

Unsaved You have unsaved permission changes.

); }

Team Roles

Installation