feat(staff): super user grant/revoke UI with last-user guardrail

Backend:
- GET /api/staff/me — returns current staff record (includes isSuperUser)
- PATCH /api/staff/:id — accepts optional isSuperUser boolean; only super users
  can change this field; last-super-user guardrail prevents revoking the only
  active super user
- PATCH /api/staff/:id (active=false) — guardrail prevents deactivating the
  last active super user
- DELETE /api/staff/:id — guardrail prevents deleting the last active super user

Frontend (Staff.tsx):
- Fetches current user via GET /api/staff/me to determine isSuperUser
- Shows ★ Super User badge for super user staff rows
- Super user sees "+ Grant" button on non-super-user rows
- Super user sees "Revoke" toggle on super-user rows (disabled if last one)
- Deactivate button disabled for the last active super user
- Error message displayed when backend guardrail triggers

GRO-206

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Flea Flicker
2026-03-29 07:29:35 +00:00
committed by groombook-ci[bot]
parent 8de0a00a2b
commit e3c5ebb337
2 changed files with 144 additions and 5 deletions
+79 -2
View File
@@ -15,7 +15,18 @@ const createStaffSchema = z.object({
active: z.boolean().default(true),
});
const updateStaffSchema = createStaffSchema.partial().omit({ email: true });
const updateStaffSchema = z.object({
name: z.string().min(1).max(200).optional(),
role: z.enum(["groomer", "receptionist", "manager"]).optional(),
active: z.boolean().optional(),
isSuperUser: z.boolean().optional(),
oidcSub: z.string().optional(),
});
staffRouter.get("/me", async (c) => {
const staffRow = c.get("staff");
return c.json(staffRow);
});
staffRouter.get("/", async (c) => {
const db = getDb();
@@ -45,11 +56,57 @@ staffRouter.post("/", zValidator("json", createStaffSchema), async (c) => {
staffRouter.patch("/:id", zValidator("json", updateStaffSchema), async (c) => {
const db = getDb();
const currentStaff = c.get("staff");
const body = c.req.valid("json");
const targetId = c.req.param("id");
// Only super users can change isSuperUser
if (body.isSuperUser !== undefined && !currentStaff.isSuperUser) {
return c.json({ error: "Forbidden: super user privileges required to modify super user status" }, 403);
}
// Before revoking super user, check if this is the last one
if (body.isSuperUser === false) {
const superUserCount = await db
.select({ id: staff.id })
.from(staff)
.where(and(eq(staff.isSuperUser, true), eq(staff.active, true)))
.limit(2);
// If only 1 or 0 active super users and the target is one of them, block revoke
if (superUserCount.length <= 1) {
return c.json(
{ error: "Cannot revoke the last super user. Assign another super user first." },
400
);
}
}
// When deactivating a super user, also check last-super-user guardrail
if (body.active === false) {
const [target] = await db
.select({ isSuperUser: staff.isSuperUser })
.from(staff)
.where(eq(staff.id, targetId))
.limit(1);
if (target?.isSuperUser) {
const superUserCount = await db
.select({ id: staff.id })
.from(staff)
.where(and(eq(staff.isSuperUser, true), eq(staff.active, true)))
.limit(2);
if (superUserCount.length <= 1) {
return c.json(
{ error: "Cannot deactivate the last super user. Assign another super user first." },
400
);
}
}
}
const [row] = await db
.update(staff)
.set({ ...body, updatedAt: new Date() })
.where(eq(staff.id, c.req.param("id")))
.where(eq(staff.id, targetId))
.returning();
if (!row) return c.json({ error: "Not found" }, 404);
return c.json(row);
@@ -81,6 +138,26 @@ staffRouter.delete("/:id", async (c) => {
);
}
// Prevent deleting the last super user
const [targetStaff] = await db
.select({ isSuperUser: staff.isSuperUser })
.from(staff)
.where(eq(staff.id, id))
.limit(1);
if (targetStaff?.isSuperUser) {
const superUserCount = await db
.select({ id: staff.id })
.from(staff)
.where(and(eq(staff.isSuperUser, true), eq(staff.active, true)))
.limit(2);
if (superUserCount.length <= 1) {
return c.json(
{ error: "Cannot delete the last super user. Assign another super user first." },
400
);
}
}
const [row] = await db
.delete(staff)
.where(eq(staff.id, id))
+65 -3
View File
@@ -11,6 +11,7 @@ const EMPTY_FORM: StaffForm = { name: "", email: "", role: "groomer" };
export function StaffPage() {
const [staff, setStaff] = useState<Staff[]>([]);
const [me, setMe] = useState<Staff | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [editing, setEditing] = useState<Staff | null>(null);
@@ -18,6 +19,11 @@ export function StaffPage() {
const [form, setForm] = useState<StaffForm>(EMPTY_FORM);
const [formError, setFormError] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [togglingSuperUser, setTogglingSuperUser] = useState<string | null>(null);
const [toggleError, setToggleError] = useState<string | null>(null);
const isCurrentUserSuperUser = me?.isSuperUser ?? false;
const activeSuperUserCount = staff.filter((s) => s.active && s.isSuperUser).length;
async function load() {
const r = await fetch("/api/staff?includeInactive=true");
@@ -25,8 +31,15 @@ export function StaffPage() {
setStaff((await r.json()) as Staff[]);
}
async function loadMe() {
const r = await fetch("/api/staff/me");
if (r.ok) {
setMe((await r.json()) as Staff);
}
}
useEffect(() => {
load()
Promise.all([load(), loadMe()])
.catch((e: unknown) => setError(e instanceof Error ? e.message : "Unknown error"))
.finally(() => setLoading(false));
}, []);
@@ -71,6 +84,27 @@ export function StaffPage() {
await load();
}
async function toggleSuperUser(s: Staff) {
setTogglingSuperUser(s.id);
setToggleError(null);
try {
const newValue = !s.isSuperUser;
const res = await fetch(`/api/staff/${s.id}`, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ isSuperUser: newValue }),
});
if (!res.ok) {
const err = (await res.json()) as { error?: string };
setToggleError(err.error ?? `HTTP ${res.status}`);
return;
}
await load();
} finally {
setTogglingSuperUser(null);
}
}
if (loading) return <p style={{ padding: "1rem" }}>Loading</p>;
if (error) return <p style={{ padding: "1rem", color: "red" }}>Error: {error}</p>;
@@ -83,6 +117,12 @@ export function StaffPage() {
</button>
</div>
{toggleError && (
<p style={{ color: "#dc2626", background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.5rem 0.75rem", marginBottom: "0.75rem", fontSize: 13 }}>
{toggleError}
</p>
)}
{staff.length === 0 ? (
<p>No staff members yet.</p>
) : (
@@ -90,7 +130,7 @@ export function StaffPage() {
<table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
<thead>
<tr style={{ background: "#f8fafc" }}>
{["Name", "Email", "Role", "Status", ""].map((h) => (
{["Name", "Email", "Role", "Super User", "Status", ""].map((h) => (
<th key={h} style={{ textAlign: "left", padding: "0.55rem 0.75rem", borderBottom: "1px solid #e5e7eb", fontSize: 11, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.04em" }}>{h}</th>
))}
</tr>
@@ -101,6 +141,21 @@ export function StaffPage() {
<td style={tdStyle}>{s.name}</td>
<td style={tdStyle}>{s.email}</td>
<td style={tdStyle}><span style={{ textTransform: "capitalize" }}>{s.role}</span></td>
<td style={tdStyle}>
{s.isSuperUser ? (
<span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: "#ede9fe", color: "#5b21b6" }}>
Super User
</span>
) : isCurrentUserSuperUser ? (
<button
onClick={() => toggleSuperUser(s)}
disabled={togglingSuperUser === s.id}
style={{ ...btnStyle, padding: "0.2rem 0.6rem", fontSize: 11, background: "#f3f4f6", color: "#374151", borderColor: "#d1d5db" }}
>
{togglingSuperUser === s.id ? "…" : "+ Grant"}
</button>
) : null}
</td>
<td style={tdStyle}>
<span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: s.active ? "#d1fae5" : "#f3f4f6", color: s.active ? "#065f46" : "#6b7280" }}>
{s.active ? "Active" : "Inactive"}
@@ -108,7 +163,14 @@ export function StaffPage() {
</td>
<td style={{ ...tdStyle, whiteSpace: "nowrap" }}>
<button onClick={() => openEdit(s)} style={{ ...btnStyle, marginRight: "0.4rem" }}>Edit</button>
<button onClick={() => toggleActive(s)} style={btnStyle}>{s.active ? "Deactivate" : "Activate"}</button>
<button
onClick={() => toggleActive(s)}
disabled={s.isSuperUser && activeSuperUserCount <= 1 && s.active}
title={s.isSuperUser && activeSuperUserCount <= 1 && s.active ? "Cannot deactivate the last super user" : undefined}
style={{ ...btnStyle, opacity: s.isSuperUser && activeSuperUserCount <= 1 && s.active ? 0.5 : 1 }}
>
{s.active ? "Deactivate" : "Activate"}
</button>
</td>
</tr>
))}