Add more permissions

resources/js/Pages/Client/Index.vue

@@ -1,19 +1,26 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import TextInput from "@/Components/TextInput.vue";
-import { Link, useForm, router } from "@inertiajs/vue3";
+import { Link, useForm, router, usePage } from "@inertiajs/vue3";
 import ActionMessage from "@/Components/ActionMessage.vue";
 import DialogModal from "@/Components/DialogModal.vue";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
+import { hasPermission } from "@/Services/permissions";
 
 const props = defineProps({
   clients: Object,
   filters: Object,
 });
 
+const page = usePage();
+// Expose as a callable computed: use in templates as hasPerm('permission-slug')
+const hasPerm = computed(() => (permission) =>
+  hasPermission(page.props.auth?.user, permission)
+);
+
 const Address = {
   address: "",
   country: "",
@@ -87,7 +94,10 @@ const fmtCurrency = (v) => {
         <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
           <div class="mx-auto max-w-4x1 py-3 space-y-3">
             <!-- Top actions -->
-            <div class="flex items-center justify-between gap-3">
+            <div
+              class="flex items-center justify-between gap-3"
+              v-if="hasPerm('client-edit')"
+            >
               <PrimaryButton
                 @click="openDrawerCreateClient"
                 class="bg-blue-600 hover:bg-blue-700"