Modify Shot Data Table Functions

frontend/src/components/layout/AppHeader.vue

@@ -34,11 +34,11 @@
             <Avatar class="h-10 w-10">
               <AvatarImage 
                 v-if="user?.avatar_url" 
-                :src="getAvatarUrl(user.avatar_url)" 
+                :src="getAvatarUrl(user.avatar_url, user.first_name, user.last_name)" 
               />
               <AvatarImage 
                 v-else
-                :src="`https://api.dicebear.com/7.x/initials/svg?seed=${user?.first_name} ${user?.last_name}`" 
+                :src="getInitialsAvatarUrl(user.first_name, user.last_name)" 
               />
               <AvatarFallback>{{ userInitials }}</AvatarFallback>
             </Avatar>
@@ -116,14 +116,9 @@ const userInitials = computed(() => {
   return `${user.value.first_name.charAt(0)}${user.value.last_name.charAt(0)}`.toUpperCase()
 })
 
-const getAvatarUrl = (url: string | null | undefined) => {
-  if (!url) return ''
-  // If it's already a full URL, return it
-  if (url.startsWith('http')) return url
-  // Use direct static file serving
-  const cleanUrl = url.replace(/^backend[\/\\]/, '').replace(/\\/g, '/')
-  return `/${cleanUrl}`
-}
+import { useAvatarUrl } from '@/composables/useAvatarUrl'
+
+const { getAvatarUrl } = useAvatarUrl()
 
 // Generate breadcrumbs based on current route with enhanced context
 const breadcrumbs = ref<BreadcrumbData[]>([])