hide actions and pages in the frontend according to permissions

app/Http/Middleware/ShareInertiaData.php

@@ -27,7 +27,6 @@ class ShareInertiaData
         /** @var PermissionStore $permissions */
         $permissions = app(PermissionStore::class);
         Inertia::share(array_filter([
-            'permissions' => $request->user() !== null && $request->user()->currentTeam !== null ? $permissions->getPermissions($request->user()->currentTeam) : [],
             'jetstream' => function () use ($request) {
                 /** @var User|null $user */
                 $user = $request->user();
@@ -49,6 +48,7 @@ class ShareInertiaData
                 ];
             },
             'auth' => [
+                'permissions' => $request->user() !== null && $request->user()->currentTeam !== null ? $permissions->getPermissions($request->user()->currentTeam) : [],
                 'user' => function () use ($request): array {
                     /** @var User|null $user */
                     $user = $request->user();

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
 import type { Client } from '@/utils/api';
+import { canDeleteClients } from '@/utils/permissions';
 
 const emit = defineEmits<{
     delete: [];
@@ -31,6 +32,7 @@ const props = defineProps<{
         </template>
         <template #content>
             <button
+                v-if="canDeleteClients()"
                 @click="emit('delete')"
                 :aria-label="'Delete Client ' + props.client.name"
                 data-testid="client_delete"

resources/js/Components/Common/Client/ClientTable.vue

@@ -8,6 +8,7 @@ import { useClientsStore } from '@/utils/useClients';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
+import { canCreateClients } from '@/utils/permissions';
 
 const { clients } = storeToRefs(useClientsStore());
 
@@ -29,8 +30,11 @@ const createClient = ref(false);
                     <UserCircleIcon
                         class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
                     <h3 class="text-white font-semibold">No clients found</h3>
-                    <p class="pb-5">Create your first client now!</p>
+                    <p class="pb-5" v-if="canCreateClients()">
+                        Create your first client now!
+                    </p>
                     <SecondaryButton
+                        v-if="canCreateClients()"
                         @click="createClient = true"
                         :icon="PlusIcon"
                         >Create your First Client

resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue

@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
 import type { Member } from '@/utils/api';
+import { canDeleteMembers } from '@/utils/permissions';
 
 const emit = defineEmits<{
     delete: [];
@@ -31,6 +32,7 @@ const props = defineProps<{
         </template>
         <template #content>
             <button
+                v-if="canDeleteMembers()"
                 @click="emit('delete')"
                 :aria-label="'Delete Member ' + props.member.name"
                 data-testid="client_delete"

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -9,6 +9,7 @@ import SecondaryButton from '@/Components/SecondaryButton.vue';
 import { api } from '../../../../../openapi.json.client';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
+import { canInvitePlaceholderMembers } from '@/utils/permissions';
 
 const props = defineProps<{
     member: Member;
@@ -70,7 +71,10 @@ async function invitePlaceholder(id: string) {
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <SecondaryButton
-                v-if="member.is_placeholder === true"
+                v-if="
+                    member.is_placeholder === true &&
+                    canInvitePlaceholderMembers()
+                "
                 @click="invitePlaceholder(member.id)"
                 size="small"
                 >Invite</SecondaryButton

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

@@ -2,6 +2,7 @@
 import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
+import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
 const emit = defineEmits<{
     delete: [];
     edit: [];
@@ -34,12 +35,14 @@ const props = defineProps<{
                 @click.prevent="emit('delete')"
                 :aria-label="'Delete Project ' + props.project.name"
                 data-testid="project_delete"
+                v-if="canDeleteProjects()"
                 class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>
             <button
                 @click.prevent="emit('edit')"
+                v-if="canUpdateProjects()"
                 :aria-label="'Edit Project ' + props.project.name"
                 data-testid="project_edit"
                 class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">

resources/js/Components/Common/Project/ProjectTable.vue

@@ -8,6 +8,7 @@ import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.v
 import { storeToRefs } from 'pinia';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
+import { canCreateProjects } from '@/utils/permissions';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -29,8 +30,11 @@ const createProject = ref(false);
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-white font-semibold">No projects found</h3>
-                    <p class="pb-5">Create your first project now!</p>
+                    <p class="pb-5" v-if="canCreateProjects()">
+                        Create your first project now!
+                    </p>
                     <SecondaryButton
+                        v-if="canCreateProjects()"
                         @click="createProject = true"
                         :icon="PlusIcon"
                         >Create your First Project

resources/js/Components/Common/Tag/TagTable.vue

@@ -8,6 +8,7 @@ import { useTagsStore } from '@/utils/useTags';
 import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
+import { canCreateTags } from '@/utils/permissions';
 
 const { tags } = storeToRefs(useTagsStore());
 const createTag = ref(false);
@@ -28,8 +29,13 @@ const createTag = ref(false);
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-white font-semibold">No tags found</h3>
-                    <p class="pb-5">Create your first tag now!</p>
+                    <p class="pb-5" v-if="canCreateTags()">
-                    <SecondaryButton @click="createTag = true" :icon="PlusIcon"
+                        Create your first tag now!
+                    </p>
+                    <SecondaryButton
+                        v-if="canCreateTags()"
+                        @click="createTag = true"
+                        :icon="PlusIcon"
                         >Create your First Tag</SecondaryButton
                     >
                 </div>

resources/js/Components/Common/Tag/TagTableRow.vue

@@ -3,6 +3,7 @@ import type { Tag } from '@/utils/api';
 import { useTagsStore } from '@/utils/useTags';
 import TagMoreOptionsDropdown from '@/Components/Common/Tag/TagMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
+import { canDeleteTags } from '@/utils/permissions';
 
 const props = defineProps<{
     tag: Tag;
@@ -24,6 +25,7 @@ function deleteTag() {
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <TagMoreOptionsDropdown
+                v-if="canDeleteTags()"
                 :tag="tag"
                 @delete="deleteTag"></TagMoreOptionsDropdown>
         </div>

resources/js/Components/Common/Task/TaskTable.vue

@@ -8,6 +8,7 @@ import { useTasksStore } from '@/utils/useTasks';
 import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
 import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
+import { canCreateTasks } from '@/utils/permissions';
 
 const { tasks } = storeToRefs(useTasksStore());
 
@@ -39,8 +40,13 @@ const createTask = ref(false);
                     <PlusCircleIcon
                         class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                     <h3 class="text-white font-semibold">No tasks found</h3>
-                    <p class="pb-5">Create your first task now!</p>
+                    <p class="pb-5" v-if="canCreateTasks()">
-                    <SecondaryButton @click="createTask = true" :icon="PlusIcon"
+                        Create your first task now!
+                    </p>
+                    <SecondaryButton
+                        v-if="canCreateTasks()"
+                        @click="createTask = true"
+                        :icon="PlusIcon"
                         >Create your First Task
                     </SecondaryButton>
                 </div>

resources/js/Components/OrganizationSwitcher.vue

@@ -6,6 +6,7 @@ import { router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
 import { isBillingActivated } from '@/utils/billing';
 import { initializeStores } from '@/utils/init';
+import { canUpdateOrganization } from '@/utils/permissions';
 
 const page = usePage<{
     jetstream: {
@@ -88,7 +89,9 @@ const switchToTeam = (team: Organization) => {
                     Organization Settings
                 </DropdownLink>
 
-                <DropdownLink v-if="isBillingActivated()" href="/billing">
+                <DropdownLink
+                    v-if="canUpdateOrganization() && isBillingActivated()"
+                    href="/billing">
                     Billing
                 </DropdownLink>
 

resources/js/Layouts/AppLayout.vue

@@ -21,6 +21,12 @@ import MainContainer from '@/Pages/MainContainer.vue';
 import { onMounted, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores } from '@/utils/init';
+import {
+    canViewClients,
+    canViewMembers,
+    canViewProjects,
+    canViewTags,
+} from '@/utils/permissions';
 
 defineProps({
     title: String,
@@ -84,6 +90,7 @@ onMounted(async () => {
                 <nav>
                     <ul class="space-y-1">
                         <NavigationSidebarItem
+                            v-if="canViewProjects()"
                             title="Projects"
                             :icon="FolderIcon"
                             :href="route('projects')"
@@ -91,16 +98,19 @@ onMounted(async () => {
                                 route().current('projects')
                             "></NavigationSidebarItem>
                         <NavigationSidebarItem
+                            v-if="canViewClients()"
                             title="Clients"
                             :icon="UserCircleIcon"
                             :current="route().current('clients')"
                             :href="route('clients')"></NavigationSidebarItem>
                         <NavigationSidebarItem
                             title="Members"
+                            v-if="canViewMembers()"
                             :icon="UserGroupIcon"
                             :current="route().current('members')"
                             :href="route('members')"></NavigationSidebarItem>
                         <NavigationSidebarItem
+                            v-if="canViewTags()"
                             title="Tags"
                             :icon="TagIcon"
                             :current="route().current('tags')"

resources/js/Pages/Clients.vue

@@ -11,6 +11,7 @@ import { useClientsStore } from '@/utils/useClients';
 import ClientTable from '@/Components/Common/Client/ClientTable.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateClients } from '@/utils/permissions';
 
 onMounted(() => {
     useClientsStore().fetchClients();
@@ -31,7 +32,10 @@ const createClient = ref(false);
                     <TabBarItem>Archived</TabBarItem>
                 </TabBar>
             </div>
-            <SecondaryButton :icon="PlusIcon" @click="createClient = true"
+            <SecondaryButton
+                v-if="canCreateClients()"
+                :icon="PlusIcon"
+                @click="createClient = true"
                 >Create Client</SecondaryButton
             >
             <ClientCreateModal v-model:show="createClient"></ClientCreateModal>

resources/js/Pages/Members.vue

@@ -12,6 +12,7 @@ import MemberInviteModal from '@/Components/Common/Member/MemberInviteModal.vue'
 import type { Role } from '@/types/jetstream';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
+import { canCreateInvitations } from '@/utils/permissions';
 
 const inviteMember = ref(false);
 
@@ -44,7 +45,10 @@ function isActiveTab(tab: string) {
                     >
                 </TabBar>
             </div>
-            <SecondaryButton :icon="PlusIcon" @click="inviteMember = true"
+            <SecondaryButton
+                v-if="canCreateInvitations()"
+                :icon="PlusIcon"
+                @click="inviteMember = true"
                 >Invite member</SecondaryButton
             >
             <MemberInviteModal

resources/js/Pages/ProjectShow.vue

@@ -19,6 +19,7 @@ import Card from '@/Components/Common/Card.vue';
 import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
 import ProjectMemberCreateModal from '@/Components/Common/ProjectMember/ProjectMemberCreateModal.vue';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
+import { canCreateTasks, canViewProjectMembers } from '@/utils/permissions';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -83,6 +84,7 @@ onMounted(() => {
                     <CardTitle title="Tasks" :icon="CheckCircleIcon">
                         <template #actions>
                             <SecondaryButton
+                                v-if="canCreateTasks()"
                                 :icon="PlusIcon"
                                 @click="createTask = true"
                                 >Create Task
@@ -96,7 +98,7 @@ onMounted(() => {
                         <TaskTable :project-id="projectId"></TaskTable>
                     </Card>
                 </div>
-                <div>
+                <div v-if="canViewProjectMembers()">
                     <CardTitle title="Project Members" :icon="UserGroupIcon">
                         <template #actions>
                             <SecondaryButton

resources/js/Pages/Projects.vue

@@ -10,6 +10,7 @@ import { onMounted, ref } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import ProjectCreateModal from '@/Components/Common/Project/ProjectCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateProjects } from '@/utils/permissions';
 
 onMounted(() => {
     useProjectsStore().fetchProjects();
@@ -30,7 +31,10 @@ const createProject = ref(false);
                     <TabBarItem>Archived</TabBarItem>
                 </TabBar>
             </div>
-            <SecondaryButton :icon="PlusIcon" @click="createProject = true"
+            <SecondaryButton
+                v-if="canCreateProjects()"
+                :icon="PlusIcon"
+                @click="createProject = true"
                 >Create Project</SecondaryButton
             >
             <ProjectCreateModal

resources/js/Pages/Tags.vue

@@ -7,6 +7,7 @@ import { ref } from 'vue';
 import TagTable from '@/Components/Common/Tag/TagTable.vue';
 import TagCreateModal from '@/Components/Common/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
+import { canCreateTags } from '@/utils/permissions';
 
 const createTag = ref(false);
 </script>
@@ -18,7 +19,10 @@ const createTag = ref(false);
             <div class="flex items-center space-x-6">
                 <PageTitle :icon="FolderIcon" title="Tags"> </PageTitle>
             </div>
-            <SecondaryButton :icon="PlusIcon" @click="createTag = true"
+            <SecondaryButton
+                v-if="canCreateTags()"
+                :icon="PlusIcon"
+                @click="createTag = true"
                 >Create Tag</SecondaryButton
             >
             <TagCreateModal v-model:show="createTag"></TagCreateModal>

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -10,6 +10,7 @@ import type { Organization } from '@/types/models';
 import type { Permissions } from '@/types/jetstream';
 import { CreditCardIcon } from '@heroicons/vue/20/solid';
 import { isBillingActivated } from '@/utils/billing';
+import { canUpdateOrganization } from '@/utils/permissions';
 
 const props = defineProps<{
     team: Organization;
@@ -63,7 +64,9 @@ const updateTeamName = () => {
                     <Link href="/billing">
                         <PrimaryButton
                             type="button"
-                            v-if="isBillingActivated()">
+                            v-if="
+                                isBillingActivated() && canUpdateOrganization()
+                            ">
                             <CreditCardIcon class="w-5 h-5 me-2" />
                             Go to Billing
                         </PrimaryButton>

resources/js/Pages/Teams/Show.vue

@@ -7,6 +7,7 @@ import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
 import type { Organization } from '@/types/models';
 import type { Permissions, Role } from '@/types/jetstream';
 import ImportData from '@/Pages/Teams/Partials/ImportData.vue';
+import { canUpdateOrganization } from '@/utils/permissions';
 
 defineProps<{
     team: Organization;
@@ -42,7 +43,9 @@ defineProps<{
 
                 <SectionBorder />
 
-                <ImportData :team="team"></ImportData>
+                <ImportData
+                    v-if="canUpdateOrganization()"
+                    :team="team"></ImportData>
             </div>
         </div>
     </AppLayout>

resources/js/utils/init.ts

@@ -5,13 +5,18 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { useClientsStore } from '@/utils/useClients';
 import { useMembersStore } from '@/utils/useMembers';
 import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { canViewClients, canViewMembers } from '@/utils/permissions';
 
 export function initializeStores() {
     useProjectsStore().fetchProjects();
     useTasksStore().fetchTasks();
     useTagsStore().fetchTags();
     useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-    useClientsStore().fetchClients();
+    if (canViewMembers()) {
-    useMembersStore().fetchMembers();
+        useMembersStore().fetchMembers();
+    }
+    if (canViewClients()) {
+        useClientsStore().fetchClients();
+    }
     useTimeEntriesStore().fetchTimeEntries();
 }

resources/js/utils/permissions.ts

@@ -0,0 +1,83 @@
+import { usePage } from '@inertiajs/vue3';
+
+const page = usePage<{
+    auth: {
+        permissions: string[];
+    };
+}>();
+
+function currentUserHasPermission(permission: string) {
+    console.log(page.props.auth.permissions);
+    if (Array.isArray(page.props.auth.permissions)) {
+        return page.props.auth.permissions.includes(permission);
+    }
+    return false;
+}
+
+export function canUpdateOrganization() {
+    return currentUserHasPermission('organizations:update');
+}
+
+export function canViewProjects() {
+    return currentUserHasPermission('projects:view');
+}
+
+export function canCreateProjects() {
+    return currentUserHasPermission('projects:create');
+}
+
+export function canUpdateProjects() {
+    return currentUserHasPermission('projects:update');
+}
+
+export function canDeleteProjects() {
+    return currentUserHasPermission('projects:delete');
+}
+
+export function canViewProjectMembers() {
+    return currentUserHasPermission('project-members:view');
+}
+
+export function canCreateTasks() {
+    return currentUserHasPermission('tasks:create');
+}
+
+export function canCreateClients() {
+    return currentUserHasPermission('clients:create');
+}
+
+export function canDeleteClients() {
+    return currentUserHasPermission('clients:delete');
+}
+
+export function canViewClients() {
+    return currentUserHasPermission('clients:view');
+}
+
+export function canViewMembers() {
+    return currentUserHasPermission('members:view');
+}
+
+export function canDeleteMembers() {
+    return currentUserHasPermission('members:delete');
+}
+
+export function canInvitePlaceholderMembers() {
+    return currentUserHasPermission('members:invite-placeholder');
+}
+
+export function canCreateInvitations() {
+    return currentUserHasPermission('invitations:create');
+}
+
+export function canViewTags() {
+    return currentUserHasPermission('tags:view');
+}
+
+export function canCreateTags() {
+    return currentUserHasPermission('tags:create');
+}
+
+export function canDeleteTags() {
+    return currentUserHasPermission('tags:delete');
+}