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/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); }