hide actions and pages in the frontend according to permissions

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>