feat: update User model and UserInfo component to use full_name attribute

app/Models/User.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Illuminate\Database\Eloquent\Attributes\Appends;
 use Illuminate\Database\Eloquent\Attributes\Guarded;
 use Illuminate\Database\Eloquent\Attributes\Scope;
 use Illuminate\Database\Eloquent\Builder;
@@ -16,6 +17,7 @@
 use Spatie\Permission\Traits\HasRoles;
 
 #[Guarded(['id'])]
+#[Appends(['full_name'])]
 class User extends Authenticatable
 {
     use HasFactory, HasRoles, Notifiable, SoftDeletes, TwoFactorAuthenticatable;
@@ -37,10 +39,17 @@ protected function active(Builder $query): void
         $query->where('is_active', true);
     }
 
+    protected function name(): Attribute
+    {
+        return Attribute::make(
+            get: fn() => $this->userProfile?->full_name ?? '',
+        );
+    }
+
     protected function fullName(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->userProfile?->full_name ?? '',
+            get: fn() => $this->userProfile?->full_name ?? '',
         );
     }
 

resources/js/components/user-info.tsx

@@ -14,13 +14,13 @@ export function UserInfo({
     return (
         <>
             <Avatar className="h-8 w-8 overflow-hidden rounded-full">
-                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarImage src={user.avatar} alt={user.full_name} />
                 <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
-                    {getInitials(user.name)}
+                    {getInitials(user.full_name)}
                 </AvatarFallback>
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate font-medium">{user.full_name}</span>
                 {showEmail && (
                     <span className="truncate text-xs text-muted-foreground">
                         {user.email}

resources/js/types/auth.ts

@@ -1,6 +1,7 @@
 export type User = {
     id: number;
     name: string;
+    full_name: string;
     email: string;
     avatar?: string;
     email_verified_at: string | null;
@@ -18,6 +19,7 @@ export type Auth = {
 export type Passkey = {
     id: number;
     name: string;
+    full_name: string;
     authenticator: string | null;
     created_at_diff: string;
     last_used_at_diff: string | null;