From 4653eb5f646a4ac9209b8b6c8b22f83f75d600e0 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:25:38 +0530
Subject: [PATCH] refactor: update role management UI components for improved
 interaction

- Renamed props in RolesTab for clarity.
- Replaced label elements with button elements in CreateRoleDialog for better accessibility and interaction.
- Enhanced toggle functionality for category and permission selection.
---
 .../dashboard/[search_space_id]/team/page.tsx  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 6701342de..132906d9f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -712,9 +712,9 @@ function MembersTab({
 
 function RolesTab({
 	roles,
-	groupedPermissions,
+	groupedPermissions: _groupedPermissions,
 	loading,
-	onUpdateRole,
+	onUpdateRole: _onUpdateRole,
 	onDeleteRole,
 	canUpdate,
 	canDelete,
@@ -1500,7 +1500,11 @@ function CreateRoleDialog({
 
 									return (
 										<div key={category} className="space-y-2">
-											<label className="flex items-center gap-2 cursor-pointer hover:bg-muted/50 p-1 rounded w-full text-left">
+											<button
+												type="button"
+												className="flex items-center gap-2 cursor-pointer hover:bg-muted/50 p-1 rounded w-full text-left"
+												onClick={() => toggleCategory(category)}
+											>
 												<Checkbox
 													checked={allSelected}
 													onCheckedChange={() => toggleCategory(category)}
@@ -1508,19 +1512,21 @@ function CreateRoleDialog({
 												<span className="text-sm font-medium capitalize">
 													{category} ({categorySelected}/{perms.length})
 												</span>
-											</label>
+											</button>
 											<div className="grid grid-cols-2 gap-2 ml-6">
 												{perms.map((perm) => (
-													<label
+													<button
+														type="button"
 														key={perm.value}
 														className="flex items-center gap-2 cursor-pointer text-left"
+														onClick={() => togglePermission(perm.value)}
 													>
 														<Checkbox
 															checked={selectedPermissions.includes(perm.value)}
 															onCheckedChange={() => togglePermission(perm.value)}
 														/>
 														<span className="text-xs">{perm.value.split(":")[1]}</span>
-													</label>
+													</button>
 												))}
 											</div>
 										</div>