hide actions and pages in the frontend according to permissions

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>