fix(web): replace services badge+button with toggle switch (GRO-404)

- Replace colored "Active"/"Inactive" badge and separate Activate/Deactivate
  button with an inline toggle switch on the Services page
- Toggle matches the existing pattern used on the Staff page
- Shows loading indicator (dots) while the toggle API call is in flight
- Removes the redundant status column header (now just the toggle in that cell)

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/src/pages/Services.tsx

@@ -26,6 +26,7 @@ export function ServicesPage() {
   const [form, setForm] = useState<ServiceForm>(EMPTY_FORM);
   const [saving, setSaving] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
 
   async function load() {
     const r = await fetch("/api/services?includeInactive=true");
@@ -102,12 +103,17 @@ export function ServicesPage() {
   }
 
   async function toggleActive(s: Service) {
-    await fetch(`/api/services/${s.id}`, {
+    setTogglingId(s.id);
-      method: "PATCH",
+    try {
-      headers: { "Content-Type": "application/json" },
+      await fetch(`/api/services/${s.id}`, {
-      body: JSON.stringify({ active: !s.active }),
+        method: "PATCH",
-    });
+        headers: { "Content-Type": "application/json" },
-    await load();
+        body: JSON.stringify({ active: !s.active }),
+      });
+      await load();
+    } finally {
+      setTogglingId(null);
+    }
   }
 
   if (loading) return <p style={{ padding: "1rem" }}>Loading…</p>;
@@ -147,26 +153,43 @@ export function ServicesPage() {
                 <td style={tdStyle}>${(s.basePriceCents / 100).toFixed(2)}</td>
                 <td style={tdStyle}>{s.durationMinutes} min</td>
                 <td style={tdStyle}>
-                  <span
+                  <button
+                    onClick={() => toggleActive(s)}
+                    disabled={togglingId === s.id}
+                    title={s.active ? "Deactivate" : "Activate"}
                     style={{
-                      padding: "2px 8px",
+                      position: "relative",
-                      borderRadius: 12,
+                      width: 36,
-                      fontSize: 11,
+                      height: 20,
-                      fontWeight: 600,
+                      borderRadius: 10,
-                      background: s.active ? "#d1fae5" : "#f3f4f6",
+                      border: "1px solid",
-                      color: s.active ? "#065f46" : "#6b7280",
+                      borderColor: s.active ? "#10b981" : "#d1d5db",
+                      background: s.active ? "#d1fae5" : "#fff",
+                      cursor: togglingId === s.id ? "not-allowed" : "pointer",
+                      padding: 0,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      opacity: togglingId === s.id ? 0.6 : 1,
                     }}
                   >
-                    {s.active ? "Active" : "Inactive"}
+                    <span style={{
-                  </span>
+                      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" }}>
                   <button onClick={() => openEdit(s)} style={{ ...btnStyle, marginRight: "0.4rem" }}>
                     Edit
                   </button>
-                  <button onClick={() => toggleActive(s)} style={btnStyle}>
-                    {s.active ? "Deactivate" : "Activate"}
-                  </button>
                 </td>
               </tr>
             ))}