Add more permissions

resources/js/Pages/Client/Show.vue

@@ -1,12 +1,13 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import { ref } from "vue";
-import { Link } from "@inertiajs/vue3";
+import { computed, ref } from "vue";
+import { Link, usePage } from "@inertiajs/vue3";
 import SectionTitle from "@/Components/SectionTitle.vue";
 import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
 import FormCreateCase from "./Partials/FormCreateCase.vue";
 import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
+import { hasPermission } from "@/Services/permissions";
 
 const props = defineProps({
   client: Object,
@@ -19,6 +20,11 @@ const props = defineProps({
 // Removed page-level search; DataTable or server can handle filtering elsewhere if needed
 // DataTable search state
 const search = ref(props.filters?.search || "");
+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 drawerCreateCase = ref(false);
 
@@ -52,7 +58,7 @@ const openDrawerCreateCase = () => {
                       'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                       route().current('client.show')
                         ? 'text-indigo-600 border-indigo-600'
-                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                     ]"
                   >
                     Primeri
@@ -65,7 +71,7 @@ const openDrawerCreateCase = () => {
                       'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
                       route().current('client.contracts')
                         ? 'text-indigo-600 border-indigo-600'
-                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
+                        : 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300',
                     ]"
                   >
                     Pogodbe
@@ -93,7 +99,10 @@ const openDrawerCreateCase = () => {
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
         <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
           <div class="mx-auto max-w-4x1 py-3">
-            <div class="flex items-center justify-between gap-3">
+            <div
+              class="flex items-center justify-between gap-3"
+              v-if="hasPerm('case-edit')"
+            >
               <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
                 >Dodaj</PrimaryButton
               >