Improve NoCompanyView design and fix header for no-company state

Personalize welcome heading with user name, add descriptive subtitle,
improve invitation card styling, remove redundant logout button. Fix
hasCreateAbilities check in header to actually call the function.
Widen company switcher dropdown and improve invitation row layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -61,7 +61,7 @@
 
     <ul class="flex float-right h-8 m-0 list-none md:h-9">
       <li
-        v-if="hasCreateAbilities"
+        v-if="hasCreateAbilities()"
         class="relative hidden float-left m-0 md:block"
       >
         <BaseDropdown width-class="w-48">

resources/scripts/admin/views/NoCompanyView.vue

@@ -1,70 +1,60 @@
 <template>
-  <div class="flex items-center justify-center min-h-screen bg-gray-50">
-    <div class="w-full max-w-lg p-8">
+  <div class="flex items-center justify-center min-h-[70vh]">
+    <div class="w-full max-w-xl p-8">
       <div class="text-center mb-8">
         <BaseIcon
           name="BuildingOfficeIcon"
-          class="w-16 h-16 mx-auto text-gray-400 mb-4"
+          class="w-16 h-16 mx-auto text-gray-300 mb-4"
         />
         <h1 class="text-2xl font-semibold text-gray-900">
-          {{ $t('general.welcome') }}
+          {{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
         </h1>
+        <p class="mt-2 text-sm text-gray-500">
+          {{ $t('general.no_company_description') }}
+        </p>
       </div>
 
       <!-- Pending Invitations -->
       <div v-if="invitationStore.pendingInvitations.length > 0">
-        <h2 class="text-lg font-medium text-gray-700 mb-4 text-center">
+        <h2
+          class="text-sm font-semibold uppercase tracking-wide text-gray-400 mb-3"
+        >
           {{ $t('members.pending_invitations') }}
         </h2>
         <div class="space-y-3">
-          <BaseCard
+          <div
             v-for="invitation in invitationStore.pendingInvitations"
             :key="invitation.id"
-            class="p-4"
+            class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"
           >
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="font-medium text-gray-900">
-                  {{ invitation.company?.name }}
-                </p>
-                <p class="text-sm text-gray-500">
-                  {{ invitation.role?.title }} &middot;
-                  {{ $t('members.invited_by') }}: {{ invitation.invited_by?.name }}
-                </p>
-              </div>
-              <div class="flex space-x-2">
-                <BaseButton
-                  size="sm"
-                  @click="acceptInvitation(invitation.token)"
-                >
-                  {{ $t('general.accept') }}
-                </BaseButton>
-                <BaseButton
-                  variant="danger"
-                  size="sm"
-                  @click="declineInvitation(invitation.token)"
-                >
-                  {{ $t('general.decline') }}
-                </BaseButton>
-              </div>
+            <div>
+              <p class="font-medium text-gray-900">
+                {{ invitation.company?.name }}
+              </p>
+              <p class="text-sm text-gray-500">
+                {{ invitation.role?.title }} &middot;
+                {{ $t('members.invited_by') }}:
+                {{ invitation.invited_by?.name }}
+              </p>
             </div>
-          </BaseCard>
+            <div class="flex space-x-2 ml-4 shrink-0">
+              <BaseButton
+                size="sm"
+                @click="acceptInvitation(invitation.token)"
+              >
+                {{ $t('general.accept') }}
+              </BaseButton>
+              <BaseButton
+                variant="white"
+                size="sm"
+                @click="declineInvitation(invitation.token)"
+              >
+                {{ $t('general.decline') }}
+              </BaseButton>
+            </div>
+          </div>
         </div>
       </div>
-
-      <!-- No Invitations -->
-      <div v-else class="text-center">
-        <p class="text-gray-500">
-          You don't belong to any company yet. Ask your administrator to invite you.
-        </p>
-      </div>
-
-      <!-- Logout -->
-      <div class="mt-8 text-center">
-        <BaseButton variant="primary-outline" @click="logout">
-          {{ $t('navigation.logout') }}
-        </BaseButton>
-      </div>
     </div>
   </div>
 </template>
@@ -73,10 +63,10 @@
 import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useInvitationStore } from '@/scripts/admin/stores/invitation'
-import { useAuthStore } from '@/scripts/admin/stores/auth'
+import { useUserStore } from '@/scripts/admin/stores/user'
 
 const invitationStore = useInvitationStore()
-const authStore = useAuthStore()
+const userStore = useUserStore()
 const router = useRouter()
 
 onMounted(async () => {
@@ -91,9 +81,4 @@ async function acceptInvitation(token) {
 async function declineInvitation(token) {
   await invitationStore.decline(token)
 }
-
-async function logout() {
-  await authStore.logout()
-  router.push('/login')
-}
 </script>