From 82bf7c6078d7073c12813f167dfc28d3c3fb42a5 Mon Sep 17 00:00:00 2001
From: "groombook-engineer[bot]"
 <3141748+groombook-engineer[bot]@users.noreply.github.com>
Date: Wed, 1 Apr 2026 19:39:21 +0000
Subject: [PATCH] fix(ui): replace Super User and Status action buttons with
 inline toggles

- Super User column now has an inline toggle switch instead of a badge + Grant/Revoke button
- Status column now has an inline toggle switch instead of a badge + Deactivate/Activate button
- Actions column now only has Edit button; Grant SU, Revoke SU, Deactivate, Activate removed
- Both toggles disabled when staff member is the last active super user
- Loading indicator shown while toggling (togglingId === s.id)
- No new dependencies; styled button toggle consistent with existing inline styles

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/pages/Staff.tsx | 108 +++++++++++++++++++++++++++--------
 1 file changed, 84 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/pages/Staff.tsx b/apps/web/src/pages/Staff.tsx
index a521e1c..f338338 100644
--- a/apps/web/src/pages/Staff.tsx
+++ b/apps/web/src/pages/Staff.tsx
@@ -75,8 +75,19 @@ export function StaffPage() {
   }
 
   async function toggleActive(s: Staff) {
-    await fetch(`/api/staff/${s.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ active: !s.active }) });
-    await load();
+    setTogglingId(s.id);
+    setToggleError(null);
+    try {
+      const res = await fetch(`/api/staff/${s.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ active: !s.active }) });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        setToggleError(err.error ?? `HTTP ${res.status}`);
+        return;
+      }
+      await load();
+    } finally {
+      setTogglingId(null);
+    }
   }
 
   async function toggleSuperUser(s: Staff) {
@@ -137,34 +148,83 @@ export function StaffPage() {
                 <td style={tdStyle}>{s.email}</td>
                 <td style={tdStyle}><span style={{ textTransform: "capitalize" }}>{s.role}</span></td>
                 <td style={tdStyle}>
-                  {s.isSuperUser ? (
-                    <span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: "#fef3c7", color: "#92400e" }}>
-                      Super User
-                    </span>
+                  {currentUser?.isSuperUser ? (
+                    <button
+                      onClick={() => toggleSuperUser(s)}
+                      disabled={togglingId === s.id || isLastSuperUser(s)}
+                      title={isLastSuperUser(s) ? "Cannot revoke the last super user" : s.isSuperUser ? "Revoke super user" : "Grant super user"}
+                      style={{
+                        position: "relative",
+                        width: 36,
+                        height: 20,
+                        borderRadius: 10,
+                        border: "1px solid",
+                        borderColor: s.isSuperUser ? "#f59e0b" : "#d1d5db",
+                        background: s.isSuperUser ? "#fef3c7" : "#fff",
+                        cursor: togglingId === s.id || isLastSuperUser(s) ? "not-allowed" : "pointer",
+                        padding: 0,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        opacity: togglingId === s.id || isLastSuperUser(s) ? 0.6 : 1,
+                      }}
+                    >
+                      <span style={{
+                        position: "absolute",
+                        left: s.isSuperUser ? 17 : 2,
+                        width: 14,
+                        height: 14,
+                        borderRadius: 7,
+                        background: s.isSuperUser ? "#f59e0b" : "#d1d5db",
+                        transition: "left 0.15s ease",
+                      }} />
+                      {togglingId === s.id && (
+                        <span style={{ position: "absolute", fontSize: 9, color: "#92400e", fontWeight: 700 }}>…</span>
+                      )}
+                    </button>
                   ) : (
-                    <span style={{ color: "#9ca3af", fontSize: 13 }}>—</span>
+                    s.isSuperUser ? (
+                      <span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: "#fef3c7", color: "#92400e" }}>Super User</span>
+                    ) : (
+                      <span style={{ color: "#9ca3af", fontSize: 13 }}>—</span>
+                    )
                   )}
                 </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"}
-                  </span>
+                  <button
+                    onClick={() => toggleActive(s)}
+                    disabled={togglingId === s.id || isLastSuperUser(s)}
+                    title={isLastSuperUser(s) ? "Cannot deactivate the last super user" : s.active ? "Deactivate" : "Activate"}
+                    style={{
+                      position: "relative",
+                      width: 36,
+                      height: 20,
+                      borderRadius: 10,
+                      border: "1px solid",
+                      borderColor: s.active ? "#10b981" : "#d1d5db",
+                      background: s.active ? "#d1fae5" : "#fff",
+                      cursor: togglingId === s.id || isLastSuperUser(s) ? "not-allowed" : "pointer",
+                      padding: 0,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      opacity: togglingId === s.id || isLastSuperUser(s) ? 0.6 : 1,
+                    }}
+                  >
+                    <span style={{
+                      position: "absolute",
+                      left: s.active ? 17 : 2,
+                      width: 14,
+                      height: 14,
+                      borderRadius: 7,
+                      background: s.active ? "#10b981" : "#d1d5db",
+                      transition: "left 0.15s ease",
+                    }} />
+                    {togglingId === s.id && (
+                      <span style={{ position: "absolute", fontSize: 9, color: s.active ? "#065f46" : "#6b7280", fontWeight: 700 }}>…</span>
+                    )}
+                  </button>
                 </td>
                 <td style={{ ...tdStyle, whiteSpace: "nowrap" }}>
-                  {currentUser?.isSuperUser && (
-                    <>
-                      <button
-                        onClick={() => toggleSuperUser(s)}
-                        disabled={togglingId === s.id || isLastSuperUser(s)}
-                        title={isLastSuperUser(s) ? "Cannot revoke the last super user" : s.isSuperUser ? "Revoke super user" : "Grant super user"}
-                        style={{ ...btnStyle, marginRight: "0.4rem", ...(s.isSuperUser ? { color: "#b45309", borderColor: "#f59e0b" } : {}) }}
-                      >
-                        {togglingId === s.id ? "…" : s.isSuperUser ? "Revoke SU" : "Grant SU"}
-                      </button>
-                    </>
-                  )}
-                  <button onClick={() => openEdit(s)} style={{ ...btnStyle, marginRight: "0.4rem" }}>Edit</button>
-                  <button onClick={() => toggleActive(s)} style={btnStyle}>{s.active ? "Deactivate" : "Activate"}</button>
+                  <button onClick={() => openEdit(s)} style={btnStyle}>Edit</button>
                 </td>
               </tr>
             ))}