chore: Move frontend authorization to permission based system (#9709)

We previously relied on user roles to determine whether to render
specific routes in our frontend components. A permissions-based model is replacing this approach.


Follow up: #9695

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components/policy.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+import { hasPermissions } from '../helper/permissionsHelper';
+const props = defineProps({
+  permissions: {
+    type: Array,
+    required: true,
+  },
+});
+
+const getters = useStoreGetters();
+const user = getters.getCurrentUser.value;
+const hasPermission = computed(() =>
+  hasPermissions(props.permissions, user.permissions)
+);
+</script>
+
+<template>
+  <div v-if="hasPermission">
+    <slot />
+  </div>
+</template>