From 76e74c237b4ab8aed53f05d8a652beaaa2d28aad Mon Sep 17 00:00:00 2001
From: phil_00 <162841065+crazifil@users.noreply.github.com>
Date: Wed, 12 Aug 2026 20:27:06 +0100
Subject: [PATCH 1/3] Add deputy security chief and order security roles

---
 api/src/services/place/place.service.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/api/src/services/place/place.service.ts b/api/src/services/place/place.service.ts
index 6f3c1090..2e54dd5a 100644
--- a/api/src/services/place/place.service.ts
+++ b/api/src/services/place/place.service.ts
@@ -191,6 +191,7 @@ export class PlaceService {
     const SecurityInfo = {};
     const securityRoles = [
       { mapName: 'SecurityChief', roleName: 'Security Chief' },
+      { mapName: 'DeputySecurityChief', roleName: 'Deputy Security Chief' },
       { mapName: 'SecurityCaptain', roleName: 'Security Captain' },
       { mapName: 'SecurityLieutenant', roleName: 'Security Lieutenant' },
       { mapName: 'SecuritySergeant', roleName: 'Security Sergeant' },
@@ -198,16 +199,16 @@ export class PlaceService {
       { mapName: 'JailGuard', roleName: 'Jail Guard' },
     ];
     try {
-      await Promise.all(securityRoles.map(async (role) => {
-        const roleCode = await this.roleRepository.roleMap[role.mapName];
-        await this.roleAssignmentRepository.getUsernamesByRoleId(roleCode).then(response => {
-          const users = [];
-          response.forEach(row => {
-            users.push(row.username);
-          });
-          SecurityInfo[role.roleName] = users;
-        });
-      }));
+     for (const role of securityRoles) {
+      const roleCode = await this.roleRepository.roleMap[role.mapName];
+      const response = await this.roleAssignmentRepository.getUsernamesByRoleId(roleCode);
+      const users = [];
+
+      response.forEach(row => {
+        users.push(row.username);
+      });
+      SecurityInfo[role.roleName] = users;
+    }
     } catch (error) {
       console.error(error);
     }

From eca44c6ff284dd6b27de8bf101f275cb4c470518 Mon Sep 17 00:00:00 2001
From: phil_00 <162841065+crazifil@users.noreply.github.com>
Date: Wed, 12 Aug 2026 20:34:57 +0100
Subject: [PATCH 2/3] Update security role hierarchy and admin access

---
 api/src/services/member/member.service.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/api/src/services/member/member.service.ts b/api/src/services/member/member.service.ts
index 8f033d45..cc41eb1e 100644
--- a/api/src/services/member/member.service.ts
+++ b/api/src/services/member/member.service.ts
@@ -59,6 +59,7 @@ export class MemberService {
       this.roleRepository.roleMap.Admin,
       this.roleRepository.roleMap.SecurityCaptain,
       this.roleRepository.roleMap.SecurityChief,
+      this.roleRepository.roleMap.DeputySecurityChief,
       this.roleRepository.roleMap.SecurityLieutenant,
       this.roleRepository.roleMap.SecurityOfficer,
       this.roleRepository.roleMap.SecuritySergeant,

From ee9ff72f5ee0f04e89717c0b7d2b3d73bc73b25d Mon Sep 17 00:00:00 2001
From: phil_00 <162841065+crazifil@users.noreply.github.com>
Date: Tue, 18 Aug 2026 22:50:08 +0100
Subject: [PATCH 3/3] Allow Security Chief & Deputy Chief to manage security
 roles less SC & DSC

---
 api/src/controllers/admin.controller.ts   |  26 ++-
 api/src/controllers/member.controller.ts  |  13 ++
 api/src/routes/member.routes.ts           |   3 +
 api/src/services/member/member.service.ts |  22 +++
 spa/src/pages/admin/user/FireRoles.vue    | 188 +++++++++++++++-------
 spa/src/pages/admin/user/HireRoles.vue    | 122 +++++++++++---
 spa/src/pages/admin/user/SubMenu.vue      | 187 +++++++++++++++------
 7 files changed, 429 insertions(+), 132 deletions(-)

diff --git a/api/src/controllers/admin.controller.ts b/api/src/controllers/admin.controller.ts
index a9298ceb..2ba8c4ce 100644
--- a/api/src/controllers/admin.controller.ts
+++ b/api/src/controllers/admin.controller.ts
@@ -123,11 +123,18 @@ class AdminController {
       place_id = parseInt(place_id);
     }
     const accessLevel = await this.memberService.getAccessLevel(session.id);
-    if (accessLevel.includes('admin')) {
+    const roleId = parseInt(role_id);
+    const canManageSecurityRoles =
+      await this.memberService.canManageSecurityRoles(session.id);
+    const canManageRole =
+      accessLevel.includes('admin') ||
+      (canManageSecurityRoles &&
+        this.memberService.canSecurityManageRole(roleId));
+    if (canManageRole) {
       try {
         await this.adminService.fireRole(
           parseInt(member_id),
-          parseInt(role_id),
+          roleId,
           place_id,
         );
         response.status(200).json({message: 'Role fired successfully'});
@@ -139,7 +146,7 @@ class AdminController {
       response.status(403).json({error: 'Access Denied'});
     }
   }
-  
+
   public async getDonor(request: Request, response: Response): Promise<string> {
     const session = this.memberService.decryptSession(request, response);
     if (!session) return;
@@ -179,12 +186,19 @@ class AdminController {
     const session = this.memberService.decryptSession(request, response);
     if (!session) return;
     const accessLevel = await this.memberService.getAccessLevel(session.id);
-    if (accessLevel.includes('admin')) {
-      const {member_id, role_id} = request.body;
+    const {member_id, role_id} = request.body;
+    const roleId = parseInt(role_id);
+    const canManageSecurityRoles =
+      await this.memberService.canManageSecurityRoles(session.id);
+    const canManageRole =
+      accessLevel.includes('admin') ||
+      (canManageSecurityRoles &&
+        this.memberService.canSecurityManageRole(roleId));
+    if (canManageRole) {
       try {
         await this.adminService.hireRole(
           parseInt(member_id),
-          parseInt(role_id),
+          roleId,
         );
         response.status(200).json({message: 'Role hired successfully'});
       } catch(e) {
diff --git a/api/src/controllers/member.controller.ts b/api/src/controllers/member.controller.ts
index 29dd0e8c..cdbfc19d 100644
--- a/api/src/controllers/member.controller.ts
+++ b/api/src/controllers/member.controller.ts
@@ -40,6 +40,19 @@ class MemberController {
     response.status(200).json({ accessLevel });
   }
 
+  public async canManageSecurityRoles(
+    request: Request,
+    response: Response,
+  ): Promise<void> {
+    const session = this.memberService.decryptSession(request, response);
+    if (!session) return;
+
+    const canManage =
+      await this.memberService.canManageSecurityRoles(session.id);
+
+    response.status(200).json({ canManage });
+  }
+
   public async getDonorLevel(request: Request, response: Response): Promise<string> {
     const session = this.memberService.decryptSession(request, response);
     if (!session) return;
diff --git a/api/src/routes/member.routes.ts b/api/src/routes/member.routes.ts
index 906b63c4..2a550115 100644
--- a/api/src/routes/member.routes.ts
+++ b/api/src/routes/member.routes.ts
@@ -20,6 +20,9 @@ memberRoutes.get('/getrolename', (request, response) =>
 memberRoutes.get('/getadminlevel', (request, response) =>
   memberController.getAdminLevel(request, response),
 );
+memberRoutes.get('/can-manage-security-roles', (request, response) =>
+  memberController.canManageSecurityRoles(request, response),
+);
 memberRoutes.get('/getdonorlevel', (request, response) =>
   memberController.getDonorLevel(request, response),
 );
diff --git a/api/src/services/member/member.service.ts b/api/src/services/member/member.service.ts
index cc41eb1e..3e090aaf 100644
--- a/api/src/services/member/member.service.ts
+++ b/api/src/services/member/member.service.ts
@@ -67,6 +67,28 @@ export class MemberService {
     return !!roleAssignments.find(assignment => ADMIN_ROLES.includes(assignment.role_id));
   }
 
+  public async canManageSecurityRoles(memberId: number): Promise<boolean> {
+    const roleAssignments =
+      await this.roleAssignmentRepository.getByMemberId(memberId);
+    const SECURITY_ROLE_MANAGERS = [
+      this.roleRepository.roleMap.SecurityChief,
+      this.roleRepository.roleMap.DeputySecurityChief,
+    ];
+    return !!roleAssignments.find(assignment => SECURITY_ROLE_MANAGERS.includes(assignment.role_id),);
+  }
+
+  public canSecurityManageRole(roleId: number): boolean {
+    const SECURITY_ROLES = [
+      this.roleRepository.roleMap.SecurityCaptain,
+      this.roleRepository.roleMap.SecurityLieutenant,
+      this.roleRepository.roleMap.SecuritySergeant,
+      this.roleRepository.roleMap.SecurityOfficer,
+      this.roleRepository.roleMap.SecurityAdvisor,
+      this.roleRepository.roleMap.JailGuard,
+    ];
+    return SECURITY_ROLES.includes(roleId);
+  }
+
   public async canLeader(memberId: number): Promise<boolean> {
     const roleAssignments = await this.roleAssignmentRepository.getByMemberId(memberId);
     // Extracted admin roles into a constant for easy management
diff --git a/spa/src/pages/admin/user/FireRoles.vue b/spa/src/pages/admin/user/FireRoles.vue
index 74bd9ae9..27d67b76 100644
--- a/spa/src/pages/admin/user/FireRoles.vue
+++ b/spa/src/pages/admin/user/FireRoles.vue
@@ -5,64 +5,98 @@
         {{ error }}
       </div>
     </div>
+
     <div v-if="!error && roles.length > 0">
       <table>
         <tbody>
-        <tr>
-          <td class="px-4 py-2 font-bold text-center">Role</td>
-          <td class="px-4 py-2 font-bold text-center">Place</td>
-          <td />
-        </tr>
-        <tr class="hover:bg-gray-600" v-for="id in roles" :key="id">
-          <td class="border text-white px-4 py-2">{{ id.name }}</td>
-          <td class="border text-white px-4 py-2">
-            <span v-if="id.place === null">City Wide</span>
-            <span v-else>{{ id.place }}</span>
-          </td>
-          <td class="border text-red-500 px-4 py-2">
-            <span v-if="
-            [id.name !== 'Admin' &&
-            id.name !== 'Champion' &&
-            id.name !== 'Devotee' &&
-            id.name !== 'Advocate' &&
-            id.name !== 'Supporter'] ||
-            this.accessLevel.includes('admin')">
-              <button class="border text-white px-4 py-2 bg-red-900"
-                @click="showFireModal = true;
-                fireId = id.id;
-                firePlace = id.place_id;
-                fireRoleName = id.name">Fire</button>
-            </span>
-          </td>
-        </tr>
+          <tr>
+            <td class="px-4 py-2 font-bold text-center">Role</td>
+            <td class="px-4 py-2 font-bold text-center">Place</td>
+            <td />
+          </tr>
+
+          <tr
+            class="hover:bg-gray-600"
+            v-for="id in roles"
+            :key="id"
+          >
+            <td class="border text-white px-4 py-2">
+              {{ id.name }}
+            </td>
+
+            <td class="border text-white px-4 py-2">
+              <span v-if="id.place === null">City Wide</span>
+              <span v-else>{{ id.place }}</span>
+            </td>
+
+            <td class="border text-red-500 px-4 py-2">
+              <button
+                v-if="canFireRole(id.name)"
+                class="border text-white px-4 py-2 bg-red-900"
+                @click="
+                  showFireModal = true;
+                  fireId = id.id;
+                  firePlace = id.place_id;
+                  fireRoleName = id.name;
+                "
+              >
+                Fire
+              </button>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
+
     <div v-if="showFireModal">
       <div class="fixed inset-0 z-50 flex justify-center items-center">
-        <div class="flex flex-col w-2/6 max-w-5xl rounded-lg shadow-lg bg-red-300 text-red-800">
-          <!-- header -->
+        <div
+          class="
+            flex flex-col w-2/6 max-w-5xl rounded-lg
+            shadow-lg bg-red-300 text-red-800
+          "
+        >
           <div class="p-5">
             <div class="flex justify-between items-start">
-              <h3 class="text-2xl font-semibold">Terminate User?</h3>
-              <button class="p-1 leading-none" @click="showFireModal = false">
+              <h3 class="text-2xl font-semibold">
+                Terminate User?
+              </h3>
+
+              <button
+                class="p-1 leading-none"
+                @click="showFireModal = false"
+              >
                 <div class="text-xl font-semibold h-6 w-6">
                   <span>x</span>
                 </div>
               </button>
             </div>
           </div>
-          <!-- body -->
+
           <div class="p-6">
-            <p>Are you sure you want to terminate this user?</p>
+            <p>
+              Are you sure you want to terminate this user?
+            </p>
           </div>
-          <!-- footer -->
-          <div class=" p-6 flex justify-end items-center">
-            <button class="btn pr-1" @click="showFireModal = false">Cancel</button>
-            <button class="btn" @click="fireUser">Confirm</button>
+
+          <div class="p-6 flex justify-end items-center">
+            <button
+              class="btn pr-1"
+              @click="showFireModal = false"
+            >
+              Cancel
+            </button>
+
+            <button
+              class="btn"
+              @click="fireUser"
+            >
+              Confirm
+            </button>
           </div>
         </div>
       </div>
+
       <div class="opacity-50 fixed inset-0 z-60 bg-black"></div>
     </div>
   </div>
@@ -71,6 +105,7 @@
 <script>
 export default {
   name: "UserFireRoles",
+
   data() {
     return {
       error: "",
@@ -80,47 +115,90 @@ export default {
       loaded: false,
       roles: [],
       showFireModal: false,
+      canManageSecurityRoles: false,
     };
   },
-  props: ['accessLevel'],
+
+  props: ["accessLevel"],
+
   methods: {
-    async accessLevelCheck() {
-      if (!this.accessLevel.includes('admin')) {
-        this.$router.push({ name: "restrictedaccess" });
+    async getSecurityRolePermission() {
+      try {
+        const response =
+          await this.$http.get("/member/can-manage-security-roles");
+
+        this.canManageSecurityRoles = response.data.canManage;
+      } catch (error) {
+        this.canManageSecurityRoles = false;
       }
     },
+
+    canFireRole(roleName) {
+      if (this.accessLevel.includes("admin")) {
+        return true;
+      }
+
+      if (!this.canManageSecurityRoles) {
+        return false;
+      }
+
+      const securityRoles = [
+        "Security Captain",
+        "Security Lieutenant",
+        "Security Sergeant",
+        "Security Officer",
+        "Security Advisor",
+        "Jail Guard",
+      ];
+
+      return securityRoles.includes(roleName);
+    },
+
     async fireUser() {
       this.showFireModal = false;
+
       try {
-        await this.$http.post(`/admin/firerole`, {
+        await this.$http.post("/admin/firerole", {
           member_id: this.$route.params.id,
           role_id: this.fireId,
           place_id: this.firePlace,
         });
+
         await this.getRoles();
-      } catch (e) {
-        this.error = "There was an error while terminating role";
+      } catch (error) {
+        this.error =
+          "There was an error while terminating role";
       }
     },
+
     async getRoles() {
       this.error = "";
+
       try {
-        await this.$http.get(`/member/roles/${this.$route.params.id}`)
-          .then(response => {
-            this.roles = response.data.roles;
-          });
-      } catch (e) {
-        this.error = e;
+        const response =
+          await this.$http.get(
+            `/member/roles/${this.$route.params.id}`,
+          );
+
+        this.roles = response.data.roles;
+      } catch (error) {
+        this.error = error;
       }
     },
   },
+
   async mounted() {
-    await this.getRoles();
-  },
-  watch: {
-    accessLevel: function() {
-      this.accessLevelCheck();
+    await this.getSecurityRolePermission();
+
+    if (
+      !this.accessLevel.includes("admin") &&
+      !this.canManageSecurityRoles
+    ) {
+      this.$router.push({ name: "restrictedaccess" });
+      return;
     }
+
+    await this.getRoles();
   },
 };
 </script>
diff --git a/spa/src/pages/admin/user/HireRoles.vue b/spa/src/pages/admin/user/HireRoles.vue
index 4b5eeb7d..1234e73e 100644
--- a/spa/src/pages/admin/user/HireRoles.vue
+++ b/spa/src/pages/admin/user/HireRoles.vue
@@ -3,96 +3,170 @@
     <div class="text-center mb-3 w-1/2 text-xl">
       Hire Roles
     </div>
-    <div class="text-center mb-3 w-1/2 text-yellow-200 border-2 border-red-500">
-      This is to give roles to a user.  Most roles are title only with no access.  However,
-      Mayor; Deputy Mayor; Colony Leader; and all Security titles come with access rights
-      to this Admin Panel, so be mindful with who you give what roles to.
+
+    <div
+      class="text-center mb-3 w-1/2 text-yellow-200 border-2 border-red-500"
+    >
+      This is to give roles to a user. Most roles are title only with no access.
+      However, some roles come with access rights to the Admin Panel, so be
+      mindful with who you give what roles to.
     </div>
+
     <div class="text-center mb-3 w-1/2">
-      <select class="mr-3" v-model="roleSelector">
-        <option value="first">---Select Role to Hire---</option>
-        <option v-for="role in roles" :key="role.id" :value="role.id">
+      <select
+        class="mr-3"
+        v-model="roleSelector"
+      >
+        <option value="first">
+          ---Select Role to Hire---
+        </option>
+        <option
+          v-for="role in roles"
+          :key="role.id"
+          :value="role.id"
+        >
           {{ role.name }}
         </option>
       </select>
     </div>
+
     <div class="text-center w-1/2 mb-3 mr-3">
-      <span class="text-red-500" v-if="error">
-        {{error}}
+      <span
+        class="text-red-500"
+        v-if="error"
+      >
+        {{ error }}
       </span>
-      <span class="text-chat" v-else-if="success">
-        {{success}}
+
+      <span
+        class="text-chat"
+        v-else-if="success"
+      >
+        {{ success }}
       </span>
-      <span class="text-chat" v-else>
+
+      <span
+        class="text-chat"
+        v-else
+      >
         &nbsp;
       </span>
     </div>
+
     <div class="text-center w-1/2 mb-3">
-      <button class="btn" @click="hireRole">Hire</button>
+      <button
+        class="btn"
+        @click="hireRole"
+      >
+        Hire
+      </button>
     </div>
   </div>
 </template>
-  
+
 <script lang="ts">
 import Vue from "vue";
+
 export default Vue.extend({
   name: "UserHireRoles",
+
   data() {
     return {
       roleSelector: "first",
       error: null,
       roles: [],
       success: null,
+      canManageSecurityRoles: false,
     };
   },
+
   props: ["accessLevel"],
+
   methods: {
     async hireRole(): Promise<void> {
       if (this.roleSelector === "first") {
         this.error = "Please select a role";
         return;
       }
+
       try {
         await this.$http.post("/admin/hirerole", {
           member_id: this.$route.params.id,
           role_id: this.roleSelector,
         });
-        // Handle success here
+
         this.error = null;
         this.success = "Hiring was successful";
       } catch (error) {
-        // Handle error here
         this.success = null;
         this.error = "An error occurred";
       }
     },
+
+    async getSecurityRolePermission(): Promise<void> {
+      try {
+        const response =
+          await this.$http.get("/member/can-manage-security-roles");
+
+        this.canManageSecurityRoles = response.data.canManage;
+      } catch (error) {
+        this.canManageSecurityRoles = false;
+      }
+    },
+
     async getRoleList(): Promise<void> {
       try {
         const response = await this.$http.get("/admin/rolelist/");
+
+        const securityRoles = [
+          "Security Captain",
+          "Security Lieutenant",
+          "Security Sergeant",
+          "Security Officer",
+          "Security Advisor",
+          "Jail Guard",
+        ];
+
         response.data.roles.forEach(role => {
+          if (
+            !this.accessLevel.includes("admin") &&
+            this.canManageSecurityRoles &&
+            !securityRoles.includes(role.name)
+          ) {
+            return;
+          }
+
           if (
             (role.name === "Champion" ||
               role.name === "Devotee" ||
               role.name === "Advocate" ||
               role.name === "Supporter" ||
               role.name === "Admin") &&
-              !this.accessLevel.includes("admin")
+            !this.accessLevel.includes("admin")
           ) {
             return;
-          } else {
-            this.roles.push(role);
           }
+
+          this.roles.push(role);
         });
-      } catch (e) {
-        this.error = e;
+      } catch (error) {
+        this.error = error;
       }
     },
   },
-  mounted() {
-    if (!this.accessLevel.includes("admin")) {
+
+  async mounted() {
+    await this.getSecurityRolePermission();
+
+    if (
+      !this.accessLevel.includes("admin") &&
+      !this.canManageSecurityRoles
+    ) {
       this.$router.push({ name: "restrictedaccess" });
+      return;
     }
-    this.getRoleList();
+
+    await this.getRoleList();
   },
 });
 </script>
diff --git a/spa/src/pages/admin/user/SubMenu.vue b/spa/src/pages/admin/user/SubMenu.vue
index 2362c8ca..c9efee21 100644
--- a/spa/src/pages/admin/user/SubMenu.vue
+++ b/spa/src/pages/admin/user/SubMenu.vue
@@ -1,65 +1,158 @@
 <template>
   <div class="grid grid-cols-1 w-full place-content-center">
-    <div class="flex w-full min-w-min justify-center my-2"
-         v-if="isUserDetailRoute">
-      <div class="flex">   
-        <router-link class="btn-ui-inline mx-1 w-20" v-if="this.$route.name !== 'UserView'" :to="{name: 'UserView'}">VIEW</router-link>
-        <button class="btn-ui-inline mx-1 w-20" v-else>VIEW</button>
+    <div
+      class="flex w-full min-w-min justify-center my-2"
+      v-if="isUserDetailRoute"
+    >
+      <div class="flex">
+        <router-link
+          class="btn-ui-inline mx-1 w-20"
+          v-if="this.$route.name !== 'UserView'"
+          :to="{name: 'UserView'}"
+        >VIEW</router-link>
+        <button
+          class="btn-ui-inline mx-1 w-20"
+          v-else
+        >VIEW</button>
         <div v-if="accessLevel.includes('security')">
-          <router-link class="btn-ui-inline mx-1 w-32" :to="{name: 'TransactionHistory'}">Transactions</router-link>
-          <router-link class="btn-ui-inline mx-1 w-20" :to="{name: 'UserStorageAreas'}">Storage</router-link>
-          <router-link class="btn-ui-inline mx-1 w-20" :to="{name: 'UserClubs'}">Clubs</router-link>
+          <router-link
+            class="btn-ui-inline mx-1 w-32"
+            :to="{name: 'TransactionHistory'}"
+          >Transactions</router-link>
+          <router-link
+            class="btn-ui-inline mx-1 w-20"
+            :to="{name: 'UserStorageAreas'}"
+          >Storage</router-link>
+          <router-link
+            class="btn-ui-inline mx-1 w-20"
+            :to="{name: 'UserClubs'}"
+          >Clubs</router-link>
         </div>
         <div v-if="accessLevel.includes('admin')">
-          <router-link class="btn-ui-inline mx-1 w-20" :to="{name: 'OwnedObjects'}">Objects</router-link>
-          <router-link class="btn-ui-inline mx-1 w-20" :to="{name: 'UserMallUploads'}">Uploads</router-link>
+          <router-link
+            class="btn-ui-inline mx-1 w-20"
+            :to="{name: 'OwnedObjects'}"
+          >Objects</router-link>
+          <router-link
+            class="btn-ui-inline mx-1 w-20"
+            :to="{name: 'UserMallUploads'}"
+          >Uploads</router-link>
         </div>
       </div>
     </div>
-      <div class="w-full min-w-min text-center my-2"
-           v-else-if="isUserBanRoute">
-        <router-link
-          class="btn-ui-inline mx-1 w-20"
-          :to="{name: 'UserBanAdd'}"
-          v-if="accessLevel.includes('security')">ADD</router-link>
-        <router-link
-         class="btn-ui-inline mx-1 w-20"
-         :to="{name: 'UserBanHistory'}">HISTORY</router-link>
-      </div>
-      <div class="w-full min-w-min text-center my-2"
-       v-else-if="isUserRoleRoute && (accessLevel.includes('leader') || accessLevel.includes('security'))">
-        <router-link class="btn-ui-inline mx-1 w-24"
-         :to="{name: 'UserCurrentRoles'}">CURRENT</router-link>
-        <router-link
-          v-if="accessLevel.includes('admin')"
-          class="btn-ui-inline mx-1 w-24"
-          :to="{name: 'UserHireRoles'}">HIRE</router-link>
-        <router-link v-if="accessLevel.includes('admin')" class="btn-ui-inline mx-1 w-24"
-         :to="{name: 'UserFireRoles'}">TERMINATE</router-link>
-      </div>
-      <div class="w-full min-w-min text-center my-2"
-           v-else/>
+
+    <div
+      class="w-full min-w-min text-center my-2"
+      v-else-if="isUserBanRoute"
+    >
+      <router-link
+        class="btn-ui-inline mx-1 w-20"
+        :to="{name: 'UserBanAdd'}"
+        v-if="accessLevel.includes('security')"
+      >ADD</router-link>
+      <router-link
+        class="btn-ui-inline mx-1 w-20"
+        :to="{name: 'UserBanHistory'}"
+      >HISTORY</router-link>
+    </div>
+
+    <div
+      class="w-full min-w-min text-center my-2"
+      v-else-if="
+        isUserRoleRoute &&
+        (accessLevel.includes('leader') ||
+          accessLevel.includes('security'))
+      "
+    >
+      <router-link
+        class="btn-ui-inline mx-1 w-24"
+        :to="{name: 'UserCurrentRoles'}"
+      >CURRENT</router-link>
+
+      <router-link
+        v-if="accessLevel.includes('admin') || canManageSecurityRoles"
+        class="btn-ui-inline mx-1 w-24"
+        :to="{name: 'UserHireRoles'}"
+      >HIRE</router-link>
+
+      <router-link
+        v-if="accessLevel.includes('admin') || canManageSecurityRoles"
+        class="btn-ui-inline mx-1 w-24"
+        :to="{name: 'UserFireRoles'}"
+      >TERMINATE</router-link>
+    </div>
+
+    <div
+      class="w-full min-w-min text-center my-2"
+      v-else
+    />
+
     <div class="flex w-full min-w-min items-center justify-center">
-      <router-view :accessLevel="accessLevel" />
+      <router-view
+        :accessLevel="accessLevel"
+        :canManageSecurityRoles="canManageSecurityRoles"
+      />
     </div>
   </div>
-  </template>
-  <script lang="ts">
-  import Vue from "vue";
-  export default Vue.extend({
-    name: "UserSubMenu",
-    props: ["accessLevel"],
-    computed: {
-      isUserDetailRoute(): boolean {
-        const memberView = ['UserView', 'UserEdit', 'TransactionHistory', 'OwnedObjects', 'UserStorageAreas', 'UserClubs', 'UserMallUploads']
-        return memberView.includes(this.$route.name);
-      },
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "UserSubMenu",
+
+  props: ["accessLevel"],
+
+  data() {
+    return {
+      canManageSecurityRoles: false,
+    };
+  },
+
+  computed: {
+    isUserDetailRoute(): boolean {
+      const memberView = [
+        "UserView",
+        "UserEdit",
+        "TransactionHistory",
+        "OwnedObjects",
+        "UserStorageAreas",
+        "UserClubs",
+        "UserMallUploads",
+      ];
+
+      return memberView.includes(this.$route.name);
+    },
+
     isUserBanRoute(): boolean {
-      return this.$route.name === "UserBanHistory" || this.$route.name === "UserBanAdd";
+      return this.$route.name === "UserBanHistory" ||
+        this.$route.name === "UserBanAdd";
     },
+
     isUserRoleRoute(): boolean {
-      return this.$route.name === "UserHireRoles" || this.$route.name === "UserCurrentRoles" || this.$route.name === "UserFireRoles";
+      return this.$route.name === "UserHireRoles" ||
+        this.$route.name === "UserCurrentRoles" ||
+        this.$route.name === "UserFireRoles";
+    },
+  },
+
+  methods: {
+    async getSecurityRolePermission(): Promise<void> {
+      try {
+        const response =
+          await this.$http.get("/member/can-manage-security-roles");
+
+        this.canManageSecurityRoles = response.data.canManage;
+      } catch (error) {
+        console.log(error);
+        this.canManageSecurityRoles = false;
+      }
     },
   },
+
+  async created() {
+    await this.getSecurityRolePermission();
+  },
 });
 </script>