Enhance subuser grant handling and permissions

- Update `SubuserGrantSelector` to disable the default option and display customer names if available.
- Refine `UserDashboard` to conditionally render cards based on `SessionUser` permissions.
- Add `X-Customer-Number` header in authenticated requests for subuser-specific actions.

src/components/pagination/paginatedList.vue

@@ -102,7 +102,9 @@ export function usePaginatedList() {
         ...additionalQueryParameters.value, // Add any additional query parameters, as the last parameters to override any existing parameters if needed
       },
       headers: {
-        Authorization: `Bearer ${token}`
+        Authorization: `Bearer ${token}`,
+        // Add X-Customer-Number header if subuser has selected a grant
+        'X-Customer-Number': localStorage.getItem('selected_customer_number') || ''
       }
     }) .then((response) => {
       // Check if the search is the latest search

src/components/session/authenticatedRequest.vue

@@ -79,14 +79,25 @@ export const paginatedGetRequest = (url, currentPage, itemsPerPage) => {
   if (!token) {
     return null;
   }
+  
+  // Build headers
+  const headers = {
+    Authorization: `Bearer ${token}`
+  };
+  
+  // Add X-Customer-Number header if subuser has selected a grant
+  const isSubuser = localStorage.getItem('is_subuser') === 'true';
+  const selectedCustomerNumber = getSelectedCustomerNumber();
+  if (isSubuser && selectedCustomerNumber) {
+    headers['X-Customer-Number'] = selectedCustomerNumber;
+  }
+  
   return axios.get(API_URL + url, {
     params: {
       page: currentPage,
       limit: itemsPerPage
     },
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
+    headers
   });
 };
 </script>

src/components/session/subuser/SubuserGrantSelector.vue

@@ -31,13 +31,13 @@ const selectedGrant = computed(() => {
         :value="selectedCustomerNumber"
         @change="selectGrant($event.target.value ? parseInt($event.target.value) : null)"
       >
-        <option :value="null">-- Vælg kunde --</option>
+        <option :value="null" disabled>-- Vælg kunde --</option>
         <option 
           v-for="grant in grants" 
           :key="grant.billing_customer_number"
           :value="grant.billing_customer_number"
         >
-          Kunde #{{ grant.billing_customer_number }}
+          {{ grant.name || 'Kunde #' + grant.billing_customer_number }}
         </option>
       </select>
     </div>

src/views/dashboards/UserDashboard.vue

@@ -151,7 +151,7 @@ const classes = computed(() => {
           </template>
         </WhiteBoxCard>
       </div>
-      <div class="column" :class="classes.column">
+      <div class="column" :class="classes.column" v-if="SessionUser.hasPermission('user') || SessionUser.hasPermission('BOOKINGS_ADD')">
         <!-- Book wash card -->
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>
@@ -177,7 +177,7 @@ const classes = computed(() => {
           </template>
         </WhiteBoxCard>
       </div>
-      <div class="column" :class="classes.column">
+      <div class="column" :class="classes.column" v-if="SessionUser.hasPermission('user') || SessionUser.hasPermission('VEHICLES_ADD')">
         <!-- Add vehicle card -->
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>
@@ -203,7 +203,7 @@ const classes = computed(() => {
           </template>
         </WhiteBoxCard>
       </div>
-      <div class="column" :class="classes.column">
+      <div class="column" :class="classes.column" v-if="SessionUser.hasPermission('user') || SessionUser.hasPermission('ORDERS_LIST')">
         <!-- Download wash certificate card -->
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>
@@ -229,7 +229,7 @@ const classes = computed(() => {
           </template>
         </WhiteBoxCard>
       </div>
-      <div class="column" :class="classes.column">
+      <div class="column" :class="classes.column" v-if="SessionUser.hasPermission('user') || SessionUser.hasPermission('user_invoices')">
         <!-- View invoices card -->
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>