GE monogram avatar fallback + per-page document titles

Users without a profile photo (and broken photo URLs) show the GE
monogram instead of nothing/initials - sidebar identity, employee
detail hero, and the directory list thumbs; the shopfloor cards
already did this. Document titles become
'<Facility> ShopDB - <Page>' via a router afterEach (facility from
public settings, page label from meta.title or a prettified route
name with spellings for PCs/USB/GE-Enforce/3D Printed Parts/...), so
copied links and browser tabs identify the page.

frontend/src/router/index.js

@@ -5,6 +5,7 @@ import SettingsLayout from '../views/settings/SettingsLayout.vue'
 import { setupComplete, setupSkipped, isSetupLoaded, refreshSetupState } from '../composables/setupState'
 import { loadEnabledPlugins, isPluginEnabled } from '../composables/enabledPlugins'
 import { useToast } from '../composables/toast'
+import { getFacilityName } from '../utils/siteSettings'
 
 // Auto-discover all route modules from routes/ directory
 const routeModules = import.meta.glob('./routes/*.js', { eager: true })
@@ -137,6 +138,43 @@ const router = createRouter({
   routes
 })
 
+// --- Document titles: "<Facility> ShopDB - <Page>" ---------------------------
+// Facility name comes from public settings (cached after first fetch); the
+// page label comes from meta.title when a route sets one, else a prettified
+// route name with spellings for the odd ones.
+const TITLE_SPELLINGS = {
+  'pcs': 'PCs',
+  'usb': 'USB Devices',
+  'geenforce': 'GE-Enforce',
+  'knowledgebase': 'Knowledge Base',
+  'printedparts': '3D Printed Parts',
+  'parts-kiosk': 'Parts Kiosk',
+  'tv': 'TV Slideshow',
+  'shopfloor': 'Shopfloor Dashboard',
+  'measuringtools': 'Measuring Tools',
+  'networkdevices': 'Network',
+}
+
+function pageTitleFor(route) {
+  if (route.meta?.title) return route.meta.title
+  const name = String(route.name || '')
+  if (!name) return ''
+  const base = name.replace(/-(new|edit|detail)$/, '')
+  if (TITLE_SPELLINGS[base]) return TITLE_SPELLINGS[base]
+  return base.split('-').map(word =>
+    word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+router.afterEach(async (to) => {
+  let siteTitle = 'ShopDB'
+  try {
+    const facility = await getFacilityName()
+    if (facility && facility !== 'ShopDB') siteTitle = `${facility} ShopDB`
+  } catch (titleError) { /* settings unavailable - plain ShopDB */ }
+  const page = pageTitleFor(to)
+  document.title = page && page !== 'Home' ? `${siteTitle} - ${page}` : siteTitle
+})
+
 // Navigation guard
 router.beforeEach(async (to, from, next) => {
   const authStore = useAuthStore()

frontend/src/views/AppLayout.vue

@@ -42,7 +42,8 @@
         <div class="user-menu">
           <template v-if="authStore.isAuthenticated">
             <div class="user-identity">
-              <img v-if="authStore.avatarUrl" :src="authStore.avatarUrl" class="user-avatar"
+              <img :src="authStore.avatarUrl || fallbackAvatar" class="user-avatar"
+                   :class="{ 'ge-avatar-fallback': !authStore.avatarUrl }"
                    :alt="authStore.displayName" @error="onAvatarError" />
               <div class="user-ident">
                 <div class="username">{{ authStore.displayName }}</div>
@@ -245,9 +246,12 @@ async function handleLogout() {
   router.push('/login')
 }
 
-// Hide a broken avatar (photo filename set but file missing).
+const fallbackAvatar = withBase('/ge-monogram.svg')
+
+// A broken avatar (photo set but file missing) degrades to the GE monogram.
 function onAvatarError(event) {
-  event.target.style.display = 'none'
+  event.target.src = fallbackAvatar
+  event.target.classList.add('ge-avatar-fallback')
 }
 </script>
 
@@ -257,6 +261,7 @@ function onAvatarError(event) {
 .user-menu { display: flex; flex-direction: column; gap: 0.6rem; }
 .user-identity { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
 .user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
+.ge-avatar-fallback { object-fit: contain; padding: 4px; background: #fff; }
 .user-ident { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
 .user-ident .username { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .user-sso { font-size: 0.72rem; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

frontend/src/views/employees/EmployeeDetail.vue

@@ -6,10 +6,10 @@
     <template v-else-if="employee">
       <div class="hero-card">
         <div class="hero-image" v-if="employee.photourl">
-          <img :src="employee.photourl" :alt="fullName" />
+          <img :src="employee.photourl" :alt="fullName" @error="onPhotoError" />
         </div>
         <div class="hero-image placeholder" v-else>
-          <span class="initials">{{ initials }}</span>
+          <img :src="fallbackAvatar" alt="GE Aerospace" class="ge-avatar-fallback-lg" />
         </div>
         <div class="hero-content">
           <h1 class="hero-title">{{ fullName }}</h1>
@@ -149,6 +149,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { withBase } from '../../utils/basePath'
 import { employeesApi, usbApi, notificationsApi } from '@/api'
 import { isPluginEnabled, loadEnabledPlugins } from '@/composables/enabledPlugins'
 import { useToast } from '../../composables/toast'
@@ -192,6 +193,13 @@ const fullName = computed(() => {
   return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()
 })
 
+const fallbackAvatar = withBase('/ge-monogram.svg')
+
+function onPhotoError(event) {
+  event.target.src = fallbackAvatar
+  event.target.classList.add('ge-avatar-fallback-lg')
+}
+
 const initials = computed(() => {
   if (!employee.value) return '?'
   const first = employee.value.First_Name?.trim()?.[0] || ''
@@ -291,6 +299,12 @@ function formatDate(dateStr) {
   color: white;
 }
 
+.ge-avatar-fallback-lg {
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
+  opacity: 0.85;
+}
 .initials {
   font-size: 3rem;
   font-weight: 600;

frontend/src/views/settings/EmployeeDirectory.vue

@@ -36,8 +36,8 @@
                 <td>{{ e.Team || '-' }}</td>
                 <td>{{ e.Role || '-' }}</td>
                 <td>
-                  <img v-if="e.photourl" :src="e.photourl" alt="Photo" class="photo-thumb" />
-                  <span v-else class="mono">-</span>
+                  <img :src="e.photourl || fallbackAvatar" alt="Photo" class="photo-thumb"
+                       :class="{ 'ge-thumb-fallback': !e.photourl }" />
                 </td>
                 <td class="actions">
                   <button class="btn btn-secondary btn-sm" @click="openModal(e)">Edit</button>
@@ -295,6 +295,7 @@ async function doImport() {
 .form-row .form-group { flex: 1; }
 .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem 0 0.2rem; }
 .page-info { color: var(--text-light); font-size: 0.85rem; }
+.ge-thumb-fallback { object-fit: contain; padding: 2px; background: #fff; }
 .photo-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
 .photo-manage { display: flex; align-items: center; gap: 1rem; }
 .photo-thumb-lg { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }