From 40792577395b93d000ffae2ec4be56617b915924 Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Wed, 4 Feb 2026 13:12:24 -0500
Subject: [PATCH] Update UI/UX for Adding and editing roles, Permissions can be
 set upon role add nice blocker style radios buttons instead of select boxes

---
 admin/modals/role/role_add.php  | 207 +++++++++++++++++++++++++++-----
 admin/modals/role/role_edit.php | 117 +++++++++++++-----
 admin/post/roles.php            |  16 ++-
 3 files changed, 281 insertions(+), 59 deletions(-)

diff --git a/admin/modals/role/role_add.php b/admin/modals/role/role_add.php
index c9397514..8e4d583f 100644
--- a/admin/modals/role/role_add.php
+++ b/admin/modals/role/role_add.php
@@ -11,52 +11,203 @@ ob_start();
         <span>&times;</span>
     </button>
 </div>
+
 <form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
-    <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
+    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
+
     <div class="modal-body">
+
+        <ul class="nav nav-pills nav-justified mb-3">
+            <li class="nav-item">
+                <a class="nav-link active" data-toggle="pill" href="#pills-role-details">Details</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" data-toggle="pill" href="#pills-role-permissions">Permissions</a>
+            </li>
+        </ul>
+
+        <hr>
+
         <div class="tab-content">
 
-            <div class="form-group">
-                <label>Name <strong class="text-danger">*</strong></label>
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+            <!-- DETAILS TAB -->
+            <div class="tab-pane fade show active" id="pills-role-details">
+
+                <div class="form-group">
+                    <label>Name <strong class="text-danger">*</strong></label>
+                    <div class="input-group">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
+                        </div>
+                        <input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" required>
                     </div>
-                    <input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" required>
                 </div>
+
+                <div class="form-group">
+                    <label>Description <strong class="text-danger">*</strong></label>
+                    <div class="input-group">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
+                        </div>
+                        <input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" required>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Admin Access <strong class="text-danger">*</strong></label>
+
+                    <div class="custom-control custom-radio mb-2">
+                        <input type="radio" class="custom-control-input" id="admin_no" name="role_is_admin" value="0" checked required>
+                        <label class="custom-control-label" for="admin_no">
+                            No - use permissions on the next tab
+                        </label>
+                    </div>
+
+                    <div class="custom-control custom-radio">
+                        <input type="radio" class="custom-control-input" id="admin_yes" name="role_is_admin" value="1" required>
+                        <label class="custom-control-label" for="admin_yes">
+                            Yes - this role should have full admin access
+                        </label>
+                    </div>
+
+                </div>
+
             </div>
 
-            <div class="form-group">
-                <label>Description <strong class="text-danger">*</strong></label>
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
-                    </div>
-                    <input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" required>
-                </div>
-            </div>
+            <!-- PERMISSIONS TAB -->
+            <div class="tab-pane fade" id="pills-role-permissions">
 
-            <div class="form-group">
-                <label>Admin Access <strong class="text-danger">*</strong></label>
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text"><i class="fa fa-fw fa-tools"></i></span>
+                <?php
+                // Enumerate modules
+                $sql_modules = mysqli_query($mysqli, "SELECT * FROM modules");
+                while ($row_modules = mysqli_fetch_assoc($sql_modules)) {
+
+                    $module_id = intval($row_modules['module_id']);
+
+                    // raw for name, escaped for display
+                    $module_name_raw = $row_modules['module_name'];
+                    $module_name_display = ucfirst(str_replace("module_", "", $module_name_raw));
+
+                    $module_name_display_safe = nullable_htmlentities($module_name_display);
+                    $module_description = nullable_htmlentities($row_modules['module_description']);
+
+                    // default for new role
+                    $module_permission = 0;
+
+                    $field_name = $module_id . "##" . $module_name_raw;
+                    $group_id = "perm_group_$module_id";
+                    ?>
+
+                    <div class="form-group">
+                        <label><?= $module_name_display_safe ?> <strong class="text-danger">*</strong></label>
+
+                        <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons" role="group"
+                             aria-label="Permissions for <?= $module_name_display_safe ?>">
+
+                            <label class="btn btn-outline-secondary btn-sm active" title="No Access">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_0"
+                                    value="0"
+                                    autocomplete="off"
+                                    checked
+                                    required
+                                >
+                                None
+                            </label>
+
+                            <label class="btn btn-outline-primary btn-sm" title="Viewing Only">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_1"
+                                    value="1"
+                                    autocomplete="off"
+                                >
+                                <i class="fas fa-fw fa-eye mr-1"></i>Read
+                            </label>
+
+                            <label class="btn btn-outline-warning btn-sm" title="Read, Edit, Archive">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_2"
+                                    value="2"
+                                    autocomplete="off"
+                                >
+                                <i class="fas fa-fw fa-edit mr-1"></i>Modify
+                            </label>
+
+                            <label class="btn btn-outline-danger btn-sm" title="Read, Edit, Archive, Delete">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_3"
+                                    value="3"
+                                    autocomplete="off"
+                                >
+                                <i class="fas fa-fw fa-trash mr-1"></i>Full
+                            </label>
+
+                        </div>
+
+                        <small class="form-text text-muted mt-2"><?= $module_description ?></small>
                     </div>
-                    <select class="form-control select2" name="role_is_admin" required>
-                        <option value="0">No - edit after creation to set permissions</option>
-                        <option value="1">Yes - this role should have full admin access</option>
-                    </select>
-                </div>
+
+                <?php } // end while ?>
             </div>
 
         </div>
 
     </div>
+
     <div class="modal-footer">
-        <button type="submit" name="add_role" class="btn btn-primary text-bold"><i class="fas fa-check mr-2"></i>Save</button>
-        <button type="button" class="btn btn-light" data-dismiss="modal"><i class="fas fa-times mr-2"></i>Cancel</button>
+        <button type="submit" name="add_role" class="btn btn-primary text-bold">
+            <i class="fas fa-check mr-2"></i>Create
+        </button>
+        <button type="button" class="btn btn-light" data-dismiss="modal">
+            <i class="fas fa-times mr-2"></i>Cancel
+        </button>
     </div>
 </form>
 
+<script>
+    // Optional: when Admin Yes is selected, disable permission radios + switch to Details tab
+    (function () {
+        function setPermissionsEnabled(enabled) {
+            const permsTab = document.getElementById('pills-role-permissions');
+            if (!permsTab) return;
+
+            permsTab.querySelectorAll('input[type="radio"]').forEach(function (el) {
+                el.disabled = !enabled;
+            });
+
+            // also visually dim the tab content
+            permsTab.style.opacity = enabled ? '1' : '0.5';
+        }
+
+        const adminYes = document.getElementById('admin_yes');
+        const adminNo  = document.getElementById('admin_no');
+
+        function refresh() {
+            const isAdmin = adminYes && adminYes.checked;
+            setPermissionsEnabled(!isAdmin);
+
+            if (isAdmin) {
+                // move user back to Details tab (avoids confusion)
+                const detailsTab = document.querySelector('a[href="#pills-role-details"]');
+                if (detailsTab) detailsTab.click();
+            }
+        }
+
+        if (adminYes && adminNo) {
+            adminYes.addEventListener('change', refresh);
+            adminNo.addEventListener('change', refresh);
+            refresh();
+        }
+    })();
+</script>
+
 <?php
 require_once '../../../includes/modal_footer.php';
diff --git a/admin/modals/role/role_edit.php b/admin/modals/role/role_edit.php
index 5b114f00..8bdfb6c4 100644
--- a/admin/modals/role/role_edit.php
+++ b/admin/modals/role/role_edit.php
@@ -31,36 +31,36 @@ if (empty($user_names_string)) {
     $user_names_string = "-";
 }
 
-
-// Generate the HTML form content using output buffering.
 ob_start();
+
 ?>
 <div class="modal-header bg-dark">
     <h5 class="modal-title"><i class="fas fa-fw fa-user-shield mr-2"></i>Editing role:
-        <strong><?php echo $role_name; ?></strong></h5>
+        <strong><?= $role_name ?></strong></h5>
     <button type="button" class="close text-white" data-dismiss="modal">
         <span>&times;</span>
     </button>
 </div>
 <form action="post.php" method="post" enctype="multipart/form-data" autocomplete="off">
-    <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
-    <input type="hidden" name="role_id" value="<?php echo $role_id; ?>">
+    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">
+    <input type="hidden" name="role_id" value="<?= $role_id ?>">
     <div class="modal-body">
-
         <ul class="nav nav-pills nav-justified mb-3">
             <li class="nav-item">
-                <a class="nav-link active" data-toggle="pill" href="#pills-role-details<?php echo $role_id; ?>">Details</a>
+                <a class="nav-link active" data-toggle="pill" href="#pills-role-details">Details</a>
             </li>
+            <?php if (!$role_admin) { ?>
             <li class="nav-item">
-                <a class="nav-link" data-toggle="pill" href="#pills-role-access<?php echo $role_id; ?>">Access</a>
+                <a class="nav-link" data-toggle="pill" href="#pills-role-permissions">Permissions</a>
             </li>
+            <?php } ?>
         </ul>
 
         <hr>
 
         <div class="tab-content">
 
-            <div class="tab-pane fade show active" id="pills-role-details<?php echo $role_id; ?>">
+            <div class="tab-pane fade show active" id="pills-role-details">
 
                 <div class="form-group">
                     <label>Name <strong class="text-danger">*</strong></label>
@@ -68,7 +68,7 @@ ob_start();
                         <div class="input-group-prepend">
                             <span class="input-group-text"><i class="fa fa-fw fa-user-shield"></i></span>
                         </div>
-                        <input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" value="<?php echo $role_name; ?>" required>
+                        <input type="text" class="form-control" name="role_name" placeholder="Role Name" maxlength="200" value="<?= $role_name ?>" required>
                     </div>
                 </div>
 
@@ -78,27 +78,33 @@ ob_start();
                         <div class="input-group-prepend">
                             <span class="input-group-text"><i class="fa fa-fw fa-chevron-right"></i></span>
                         </div>
-                        <input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" value="<?php echo $role_description; ?>" required>
+                        <input type="text" class="form-control" name="role_description" placeholder="Role Description" maxlength="200" value="<?= $role_description ?>" required>
                     </div>
                 </div>
 
 
                 <div class="form-group">
                     <label>Admin Access <strong class="text-danger">*</strong></label>
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text"><i class="fa fa-fw fa-tools"></i></span>
-                        </div>
-                        <select class="form-control select2" name="role_is_admin" required>
-                            <option value="1" <?php if ($role_admin) { echo 'selected'; } ?> >Yes - this role should have full admin access</option>
-                            <option value="0" <?php if (!$role_admin) { echo 'selected'; } ?>>No - use permissions on the next tab</option>
-                        </select>
+                    <div class="custom-control custom-radio mb-2">
+                        <input type="radio" class="custom-control-input" id="admin_yes" name="role_is_admin" value="1"
+                            <?php if ($role_admin) { echo 'checked'; } ?> required>
+                        <label class="custom-control-label" for="admin_yes">
+                            Yes - this role should have full admin access
+                        </label>
+                    </div>
+
+                    <div class="custom-control custom-radio">
+                        <input type="radio" class="custom-control-input" id="admin_no" name="role_is_admin" value="0"
+                            <?php if (!$role_admin) { echo 'checked'; } ?> required>
+                        <label class="custom-control-label" for="admin_no">
+                            No - use permissions on the next tab
+                        </label>
                     </div>
                 </div>
 
             </div>
-
-            <div class="tab-pane fade" id="pills-role-access<?php echo $role_id; ?>">
+            <?php if (!$role_admin) { ?>
+            <div class="tab-pane fade" id="pills-role-permissions">
 
                 <?php if ($role_admin) { ?>
                     <div class="alert alert-warning"><strong>Module permissions do not apply to Admins.</strong></div>
@@ -123,22 +129,73 @@ ob_start();
                     ?>
 
                     <div class="form-group">
-                        <label> <?php echo $module_name_display ?> <strong class="text-danger">*</strong></label>
-                        <div class="input-group">
-                            <select class="form-control select2" name="<?php echo "$module_id##$module_name" ?>" required>
-                                <option value="0" <?php if ($module_permission == 0) { echo 'selected'; } ?> >None</option>
-                                <option value="1" <?php if ($module_permission == 1) { echo 'selected'; } ?> >Read</option>
-                                <option value="2" <?php if ($module_permission == 2) { echo 'selected'; } ?>>Modify (Read, Edit, Archive)</option>
-                                <option value="3" <?php if ($module_permission == 3) { echo 'selected'; } ?>>Full (Read, Edit, Archive, Delete)</option>
-                            </select>
+                        <label> <?= $module_name_display ?> <strong class="text-danger">*</strong></label>
+                        <?php
+                        $field_name = "$module_id##$module_name";
+                        $group_id = "perm_group_$module_id";
+                        ?>
+
+                        <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons" role="group" aria-label="Permissions for <?= $module_name_display ?>">
+
+                            <label class="btn btn-outline-secondary btn-sm <?php if ($module_permission == 0) { echo 'active'; } ?>" title="No Access">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_0"
+                                    value="0"
+                                    autocomplete="off"
+                                    <?php if ($module_permission == 0) { echo 'checked'; } ?>
+                                    required
+                                >
+                                None
+                            </label>
+
+                            <label class="btn btn-outline-primary btn-sm <?php if ($module_permission == 1) { echo 'active'; } ?>" title="Viewing Only">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_1"
+                                    value="1"
+                                    autocomplete="off"
+                                    <?php if ($module_permission == 1) { echo 'checked'; } ?>
+                                >
+                                <i class="fas fa-fw fa-eye mr-1"></i>Read
+                            </label>
+
+                            <label class="btn btn-outline-warning btn-sm <?php if ($module_permission == 2) { echo 'active'; } ?>" title="Read, Edit, Archive">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_2"
+                                    value="2"
+                                    autocomplete="off"
+                                    <?php if ($module_permission == 2) { echo 'checked'; } ?>
+                                >
+                                <i class="fas fa-fw fa-edit mr-1"></i>Modify
+                            </label>
+
+                            <label class="btn btn-outline-danger btn-sm <?php if ($module_permission == 3) { echo 'active'; } ?>" title="Read, Edit, Archive, Delete">
+                                <input
+                                    type="radio"
+                                    name="<?= $field_name ?>"
+                                    id="<?= $group_id ?>_3"
+                                    value="3"
+                                    autocomplete="off"
+                                    <?php if ($module_permission == 3) { echo 'checked'; } ?>
+                                >
+                                <i class="fas fa-fw fa-trash mr-1"></i>Full
+                            </label>
+
                         </div>
-                        <small class="form-text text-muted"><?php echo $module_description ?></small>
+
+                        <small class="form-text text-muted mt-2"><?= $module_description ?></small>
 
                     </div>
 
                 <?php } // End while ?>
 
             </div>
+            <?php } ?>
 
         </div>
 
diff --git a/admin/post/roles.php b/admin/post/roles.php
index a0ec99d2..d38e0a65 100644
--- a/admin/post/roles.php
+++ b/admin/post/roles.php
@@ -18,9 +18,23 @@ if (isset($_POST['add_role'])) {
 
     $role_id = mysqli_insert_id($mysqli);
 
+    // Insert role permissions (only if not admin)
+    if ($admin == 0) {
+        foreach ($_POST as $key => $value) {
+            if (str_contains($key, '##module_')) {
+                $module_id = intval(explode('##', $key)[0]);
+                $access_level = intval($value);
+
+                if ($access_level > 0) {
+                    mysqli_query($mysqli, "INSERT INTO user_role_permissions SET user_role_id = $role_id, module_id = $module_id, user_role_permission_level = $access_level");
+                }
+            }
+        }
+    }
+
     logAction("User Role", "Create", "$session_name created user role $name", 0, $role_id);
 
-    flash_alert("User Role <strong$name</strong> created");
+    flash_alert("User Role <strong>$name</strong> created");
 
     redirect();