diff --git a/frontend/src/views/ShopfloorDashboard.vue b/frontend/src/views/ShopfloorDashboard.vue
index f98521f..4ce6bc7 100644
--- a/frontend/src/views/ShopfloorDashboard.vue
+++ b/frontend/src/views/ShopfloorDashboard.vue
@@ -1,818 +1,872 @@
-<template>
-  <div class="shopfloor-dashboard">
-    <div class="dash-fit" ref="fitEl">
-    <header class="dashboard-header">
-      <div class="logo-container">
-        <img :src="siteLogo" alt="Site logo" class="logo" />
-      </div>
-
-      <div class="header-center">
-        <div class="location-title">{{ facilityName }}</div>
-        <h1>Shopfloor Dashboard</h1>
-      </div>
-
-      <div class="header-right">
-        <div class="clock">{{ currentTime }}</div>
-        <select v-model="businessUnit" class="filter-select" @change="loadData">
-          <option value="">All Locations</option>
-          <option v-for="bu in businessUnits" :key="bu.businessunitid" :value="bu.businessunitid">
-            {{ bu.businessunit }}
-          </option>
-        </select>
-      </div>
-    </header>
-
-    <main class="dashboard-content">
-      <!-- Banner - single prominent full-width message -->
-      <section v-if="banners.length" class="banner-section">
-        <div
-          v-for="n in banners"
-          :key="n.notificationid"
-          class="banner-strip"
-          :style="{ backgroundColor: getTypeColor(n.typecolor) }"
-        >
-          {{ n.notification }}
-        </div>
-      </section>
-
-      <!-- Recognition Carousel -->
-      <section v-if="recognitions.length" class="recognition-section">
-        <div class="section-title recognition">Employee Recognition</div>
-        <div class="recognition-carousel">
-          <div
-            v-for="(rec, idx) in recognitions"
-            :key="`${rec.notificationid}-${rec.employeesso}`"
-            class="recognition-card"
-            :class="{ active: idx === currentRecognition }"
-          >
-            <div class="recognition-photo-container">
-              <img
-                v-if="rec.employeepicture"
-                :src="rec.employeepicture"
-                :alt="rec.employeename"
-                class="recognition-photo"
-                @error="handlePhotoError"
-              />
-              <img
-                v-else
-                :src="employeePhotoFallback"
-                alt="No photo"
-                class="recognition-photo ge-logo-fallback"
-              />
-            </div>
-            <div class="recognition-content">
-              <div class="recognition-header">
-                <div class="recognition-name">{{ rec.employeename }}</div>
-              </div>
-              <div class="recognition-message">{{ rec.notification }}</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Recertification grid - everyone due shown at once, so nobody has to
-           wait for a carousel to rotate to their name -->
-      <section v-if="recertifications.length" class="recert-section">
-        <div class="section-title recert-title">
-          <span>Recertification Required ({{ recertifications.length }})</span>
-          <span v-if="recertRangeLabel" class="recert-range">{{ recertRangeLabel }}</span>
-        </div>
-        <div
-          v-for="msg in recertDescriptions"
-          :key="msg"
-          class="recert-description"
-        >
-          {{ msg }}
-        </div>
-        <div class="recert-row">
-          <div
-            v-for="rec in recertPage"
-            :key="`recert-${rec.notificationid}-${rec.employeesso}`"
-            class="recert-tile"
-          >
-            <img
-              v-if="rec.employeepicture"
-              :src="rec.employeepicture"
-              :alt="rec.employeename"
-              class="recert-photo"
-              @error="handlePhotoError"
-            />
-            <img
-              v-else
-              :src="employeePhotoFallback"
-              alt="No photo"
-              class="recert-photo ge-logo-fallback"
-            />
-            <div class="recert-name">{{ rec.employeename || rec.employeesso }}</div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Current Notifications -->
-      <section v-if="currentNotifications.length" class="notifications-section">
-        <div class="section-title" :class="getSectionClass(currentNotifications)">
-          Current Notifications
-        </div>
-        <div class="events-list">
-          <div
-            v-for="n in currentNotifications"
-            :key="n.notificationid"
-            class="event-card"
-            :class="{ resolved: n.resolved }"
-          >
-            <div class="event-indicator" :style="{ backgroundColor: getTypeColor(n.typecolor) }"></div>
-            <div class="event-content">
-              <div class="event-title">{{ n.notification }}</div>
-              <div class="event-time">
-                <template v-if="n.resolved">
-                  <strong>RESOLVED</strong>
-                </template>
-                <template v-else>
-                  <strong>{{ formatTime(n.starttime) }}</strong>
-                  <span v-if="n.endtime"> - {{ formatTime(n.endtime) }}</span>
-                </template>
-              </div>
-            </div>
-            <template v-if="n.ticketnumber">
-              <a v-if="getTicketUrl(n.ticketnumber)" :href="getTicketUrl(n.ticketnumber)" target="_blank" class="event-ticket">
-                {{ n.ticketnumber }}
-              </a>
-              <span v-else class="event-ticket">{{ n.ticketnumber }}</span>
-            </template>
-          </div>
-        </div>
-      </section>
-
-      <!-- Upcoming Notifications -->
-      <section v-if="upcomingNotifications.length" class="notifications-section">
-        <div class="section-title upcoming">Upcoming</div>
-        <div class="events-list">
-          <div
-            v-for="n in upcomingNotifications"
-            :key="n.notificationid"
-            class="event-card"
-          >
-            <div class="event-indicator" :style="{ backgroundColor: getTypeColor(n.typecolor) }"></div>
-            <div class="event-content">
-              <div class="event-title">{{ n.notification }}</div>
-              <div class="event-time">
-                <strong>{{ formatDateTime(n.starttime) }}</strong>
-              </div>
-            </div>
-            <template v-if="n.ticketnumber">
-              <a v-if="getTicketUrl(n.ticketnumber)" :href="getTicketUrl(n.ticketnumber)" target="_blank" class="event-ticket">
-                {{ n.ticketnumber }}
-              </a>
-              <span v-else class="event-ticket">{{ n.ticketnumber }}</span>
-            </template>
-          </div>
-        </div>
-      </section>
-
-      <!-- No notifications -->
-      <div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !recognitions.length && !recertifications.length && !banners.length" class="no-events">
-        No active notifications
-      </div>
-
-      <div v-if="loading" class="loading">Loading...</div>
-    </main>
-
-    <footer class="dashboard-footer">
-      Auto-refreshes every 30 seconds
-    </footer>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { notificationsApi, businessUnitsApi, dashboardDefaultsApi } from '@/api'
-import { getFacilityName, getSiteLogo, getServicenowUrls } from '@/utils/siteSettings'
-import { withBase } from '@/utils/basePath'
-
-const loading = ref(true)
-const facilityName = ref('ShopDB')
-const siteLogo = ref(withBase('/ge-aerospace-logo.svg'))
-// Employee photo placeholder: the shipped GE monogram (square avatar). Kept
-// separate from siteLogo so a blank/broken site_logo setting never leaves an
-// employee tile with no image.
-const employeePhotoFallback = ref(withBase('/ge-monogram.svg'))
-// ServiceNow ticket-link config; loaded on mount. Empty/disabled = plain text.
-const servicenowConfig = ref({ enabled: true, incidentUrl: '', changeUrl: '' })
-const businessUnit = ref('')
-const businessUnits = ref([])
-const notifications = ref({ current: [], upcoming: [] })
-const currentRecognition = ref(0)
-// Layout-config fingerprint from the feed; when it changes the kiosk reloads.
-const loadedConfigVersion = ref(null)
-
-let refreshInterval = null
-let recognitionInterval = null
-let recertPageInterval = null
-
-// Fit-to-viewport: the board is a fixed 1920-wide design; scale the whole thing
-// to fill the screen so a TV shows everything with no scrolling, at any size.
-const fitEl = ref(null)
-let resizeObserver = null
-function fitToScreen() {
-  const el = fitEl.value
-  if (!el) return
-  const w = el.offsetWidth || 1
-  const h = el.offsetHeight || 1
-  const scale = Math.min(window.innerWidth / w, window.innerHeight / h)
-  el.style.transform = `scale(${scale})`
-  el.style.left = `${Math.max(0, (window.innerWidth - w * scale) / 2)}px`
-}
-
-// The board groups cards by each type's configured display style, so any custom
-// type set to carousel/grid/banner renders that way - not just the built-ins.
-const SPECIAL_STYLES = ['carousel', 'grid', 'banner']
-
-const recognitions = computed(() =>
-  notifications.value.current.filter(n => n.displaystyle === 'carousel')
-)
-
-const recertifications = computed(() =>
-  notifications.value.current.filter(n => n.displaystyle === 'grid')
-)
-
-const banners = computed(() =>
-  notifications.value.current.filter(n => n.displaystyle === 'banner')
-)
-
-// Distinct training descriptions shown once above the grid (the per-person
-// tiles only carry photo + name).
-const recertDescriptions = computed(() => {
-  const seen = new Set()
-  const out = []
-  for (const r of recertifications.value) {
-    const msg = (r.notification || '').trim()
-    if (msg && !seen.has(msg)) { seen.add(msg); out.push(msg) }
-  }
-  return out
-})
-
-// Recertification shows as a single rotating row: one page of tiles at a time
-// so it stays compact on any screen, cycling through everyone due.
-const RECERT_PAGE_SIZE = 8
-const currentRecertPage = ref(0)
-const recertPageCount = computed(() =>
-  Math.max(1, Math.ceil(recertifications.value.length / RECERT_PAGE_SIZE))
-)
-const recertPage = computed(() => {
-  const page = currentRecertPage.value % recertPageCount.value
-  const start = page * RECERT_PAGE_SIZE
-  return recertifications.value.slice(start, start + RECERT_PAGE_SIZE)
-})
-const recertRangeLabel = computed(() => {
-  if (recertPageCount.value <= 1) return ''
-  const page = currentRecertPage.value % recertPageCount.value
-  const start = page * RECERT_PAGE_SIZE
-  const end = Math.min(start + RECERT_PAGE_SIZE, recertifications.value.length)
-  return `${start + 1}-${end} of ${recertifications.value.length}`
-})
-
-const currentNotifications = computed(() =>
-  notifications.value.current.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
-)
-
-const upcomingNotifications = computed(() =>
-  notifications.value.upcoming.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
-)
-
-// Clock
-const currentTime = ref('')
-function updateClock() {
-  const now = new Date()
-  currentTime.value = now.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  })
-}
-
-onMounted(async () => {
-  updateClock()
-  setInterval(updateClock, 1000)
-
-  getFacilityName().then(name => { facilityName.value = name })
-  getSiteLogo().then(logo => { siteLogo.value = logo })
-  getServicenowUrls().then(config => { servicenowConfig.value = config })
-
-  // Load business units
-  try {
-    const response = await businessUnitsApi.list()
-    businessUnits.value = response.data.data || []
-  } catch (err) {
-    console.error('Error loading business units:', err)
-  }
-
-  // Auto-select this kiosk's business unit from its IP (visitor location),
-  // unless one was already chosen. Falls back to "all" when the IP is unmapped.
-  if (!businessUnit.value) {
-    try {
-      const response = await dashboardDefaultsApi.visitorLocation()
-      if (response.data.data?.businessunitid) {
-        businessUnit.value = response.data.data.businessunitid
-      }
-    } catch (err) {
-      console.error('Error resolving visitor location:', err)
-    }
-  }
-
-  await loadData()
-
-  // Auto-refresh every 30 seconds
-  refreshInterval = setInterval(loadData, 30000)
-
-  // Rotate recognition carousel every 8 seconds
-  recognitionInterval = setInterval(() => {
-    if (recognitions.value.length > 1) {
-      currentRecognition.value = (currentRecognition.value + 1) % recognitions.value.length
-    }
-  }, 8000)
-
-  // Cycle the recertification row through pages of employees every 7 seconds.
-  recertPageInterval = setInterval(() => {
-    if (recertPageCount.value > 1) {
-      currentRecertPage.value = (currentRecertPage.value + 1) % recertPageCount.value
-    }
-  }, 7000)
-
-  // Scale to fit once rendered, and re-fit whenever the content or window
-  // changes size (new data, banner cycling, resolution change).
-  await nextTick()
-  fitToScreen()
-  resizeObserver = new ResizeObserver(() => fitToScreen())
-  if (fitEl.value) resizeObserver.observe(fitEl.value)
-  window.addEventListener('resize', fitToScreen)
-})
-
-onUnmounted(() => {
-  if (refreshInterval) clearInterval(refreshInterval)
-  if (recognitionInterval) clearInterval(recognitionInterval)
-  if (recertPageInterval) clearInterval(recertPageInterval)
-  resizeObserver?.disconnect()
-  window.removeEventListener('resize', fitToScreen)
-})
-
-async function loadData() {
-  try {
-    const params = {}
-    if (businessUnit.value) {
-      params.businessunit = businessUnit.value
-    }
-    const response = await notificationsApi.getShopfloor(params)
-    const data = response.data.data || { current: [], upcoming: [] }
-
-    // Reload the kiosk when the board's layout config changes, so type/style
-    // edits (and deploys, via SHOPFLOOR_BUILD) reach already-open pages without
-    // anyone touching the machine.
-    const version = data.configversion
-    if (version) {
-      if (loadedConfigVersion.value && loadedConfigVersion.value !== version) {
-        window.location.reload()
-        return
-      }
-      loadedConfigVersion.value = version
-    }
-
-    notifications.value = { current: data.current || [], upcoming: data.upcoming || [] }
-  } catch (err) {
-    console.error('Error loading shopfloor data:', err)
-  } finally {
-    loading.value = false
-  }
-}
-
-function getTypeColor(typecolor) {
-  // Types store a hex color, used directly. Only legacy Bootstrap color names
-  // still need aliasing; anything else (a hex) passes straight through.
-  const aliases = {
-    success: '#04b962',
-    warning: '#ff8800',
-    danger: '#f5365c',
-    info: '#14abef',
-    primary: '#7934f3',
-    secondary: '#94614f'
-  }
-  return aliases[typecolor] || typecolor || '#14abef'
-}
-
-function getSectionClass(notifications) {
-  // Use danger color if any active incidents
-  const hasIncident = notifications.some(n => n.typecolor === 'danger' && !n.resolved)
-  return hasIncident ? 'danger' : ''
-}
-
-function formatTime(dateStr) {
-  if (!dateStr) return ''
-  return new Date(dateStr).toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-function formatDateTime(dateStr) {
-  if (!dateStr) return ''
-  return new Date(dateStr).toLocaleString('en-US', {
-    weekday: 'short',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-function getTicketUrl(ticketnumber) {
-  // Return a URL only when ServiceNow is enabled and a matching template is set.
-  // Null means "render the ticket number as plain text, no link".
-  if (!ticketnumber) return null
-  const config = servicenowConfig.value
-  if (!config.enabled) return null
-  if (ticketnumber.startsWith('GEINC') && config.incidentUrl) {
-    return config.incidentUrl.replace('{ticket}', ticketnumber)
-  }
-  if (ticketnumber.startsWith('GECHG') && config.changeUrl) {
-    return config.changeUrl.replace('{ticket}', ticketnumber)
-  }
-  return null
-}
-
-function handlePhotoError(e) {
-  // Photo URL 404'd (e.g. no photo file for this SSO): fall back to the GE
-  // monogram. Guard against a loop if the fallback itself fails to load.
-  if (e.target.dataset.fellback) { return }
-  e.target.dataset.fellback = '1'
-  e.target.src = employeePhotoFallback.value
-  e.target.classList.add('ge-logo-fallback')
-}
-</script>
-
-<style scoped>
-.shopfloor-dashboard {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  background: #00003d;
-  color: #fff;
-  font-family: Verdana, Geneva, Tahoma, 'Inter Variable', sans-serif;
-  overflow: hidden;
-}
-
-/* Fixed 1920-wide design surface; JS scales it to fill the viewport (TV) so
-   the whole board is visible with no scrolling. */
-.dash-fit {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1600px;
-  min-height: 900px;
-  display: flex;
-  flex-direction: column;
-  transform-origin: top left;
-}
-
-.dashboard-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 30px;
-  padding: 20px 40px;
-  border-bottom: 3px solid #4181ff;
-}
-
-.logo {
-  height: 90px;
-  width: auto;
-}
-
-.header-center {
-  text-align: center;
-}
-
-.location-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #b8c4d8;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.header-center h1 {
-  font-size: 28px;
-  font-weight: 700;
-  color: #ffffff;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  margin: 0;
-}
-
-.header-right {
-  text-align: right;
-}
-
-.clock {
-  font-size: 28px;
-  font-weight: 600;
-  color: #4181ff;
-  font-variant-numeric: tabular-nums;
-  margin-bottom: 10px;
-}
-
-.filter-select {
-  padding: 10px 16px;
-  font-size: 16px;
-  font-weight: 600;
-  background: #1a1a5e;
-  color: #fff;
-  border: 2px solid #4181ff;
-  border-radius: 6px;
-  cursor: pointer;
-  min-width: 200px;
-}
-
-.dashboard-content {
-  padding: 20px 40px;
-}
-
-.section-title {
-  font-size: 22px;
-  font-weight: 700;
-  padding: 12px 20px;
-  border-radius: 8px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  margin-bottom: 15px;
-  background: #4181ff;
-}
-
-.section-title.recognition {
-  background: #ffc107;
-  color: #3a2e00;
-}
-
-/* Recertification grid - blue, compact tiles so 20-30 people are all visible
-   at once (no carousel to wait through) */
-.recert-section {
-  margin-bottom: 25px;
-}
-.section-title.recert-title {
-  background: #0d6efd;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.recert-range {
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  opacity: 0.85;
-}
-.recert-description {
-  font-size: 22px;
-  font-weight: 600;
-  color: #cbd5e1;
-  margin: -4px 0 14px;
-  line-height: 1.35;
-}
-/* Single row that cycles through pages of employees */
-.recert-row {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 14px;
-}
-.recert-tile {
-  background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
-  border: 2px solid #0d6efd;
-  border-radius: 10px;
-  padding: 14px 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  text-align: center;
-}
-.recert-photo {
-  width: 90px;
-  height: 90px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 3px solid #0d6efd;
-  background: #1a1a2e;
-}
-.recert-photo.ge-logo-fallback {
-  object-fit: contain;
-  padding: 12px;
-  background: #fff;
-}
-.recert-name {
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 1.15;
-  /* Always reserve two lines so a name that wraps does not make its tile
-     taller and shift the whole grid. Longer names clamp with an ellipsis. */
-  height: 2.3em;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.section-title.danger {
-  background: #f5365c;
-}
-
-.section-title.upcoming {
-  background: #6c757d;
-}
-
-/* Recognition carousel */
-.banner-section {
-  margin-bottom: 25px;
-}
-
-.banner-strip {
-  padding: 22px 30px;
-  border-radius: 10px;
-  margin-bottom: 12px;
-  color: #fff;
-  font-size: 2rem;
-  font-weight: 700;
-  text-align: center;
-  text-wrap: balance;
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
-}
-
-.recognition-section {
-  margin-bottom: 25px;
-}
-
-.recognition-carousel {
-  position: relative;
-  min-height: 170px;
-}
-
-.recognition-card {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, #4a3a0a 0%, #2a2200 100%);
-  border: 3px solid #ffc107;
-  border-radius: 12px;
-  padding: 20px 25px;
-  display: flex;
-  align-items: center;
-  gap: 25px;
-  opacity: 0;
-  transform: translateY(20px);
-  transition: opacity 0.8s ease, transform 0.8s ease;
-}
-
-.recognition-card.active {
-  opacity: 1;
-  transform: translateY(0);
-  position: relative;
-}
-
-.recognition-photo {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 4px solid #ffc107;
-  background: #1a1a2e;
-}
-
-.recognition-photo.ge-logo-fallback {
-  object-fit: contain;
-  padding: 20px;
-  background: #fff;
-}
-
-.recognition-content {
-  flex: 1;
-}
-
-.recognition-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.recognition-star {
-  font-size: 48px;
-  color: #ffc107;
-  margin-right: 20px;
-  animation: starPulse 2s ease-in-out infinite;
-}
-
-
-@keyframes starPulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-}
-
-.recognition-name {
-  font-size: 36px;
-  font-weight: 700;
-}
-
-.recognition-message {
-  font-size: 24px;
-  color: #ccc;
-  line-height: 1.4;
-}
-
-/* Event cards */
-.notifications-section {
-  margin-bottom: 25px;
-}
-
-.events-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.event-card {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  background: #fff;
-  color: #00003d;
-  border-radius: 8px;
-  padding: 15px 20px 15px 30px;
-  gap: 15px;
-}
-
-.event-card.resolved {
-  opacity: 0.6;
-  background: #e9ecef;
-}
-
-.event-indicator {
-  /* Type color spanning the whole left edge of the card (old-site style). */
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 12px;
-  flex-shrink: 0;
-}
-
-.event-content {
-  flex: 1;
-}
-
-.event-title {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.3;
-}
-
-.event-time {
-  font-size: 18px;
-  color: #666;
-  margin-top: 5px;
-}
-
-.event-time strong {
-  color: #00003d;
-}
-
-.event-ticket {
-  font-size: 18px;
-  font-weight: 700;
-  background: #00003d;
-  color: #fff;
-  padding: 8px 16px;
-  border-radius: 6px;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.event-ticket:hover {
-  background: #4181ff;
-}
-
-.no-events, .loading {
-  text-align: center;
-  font-size: 28px;
-  font-weight: 600;
-  padding: 40px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-}
-
-.dashboard-footer {
-  margin-top: auto;
-  background: rgba(0, 0, 0, 0.8);
-  text-align: center;
-  padding: 12px;
-  font-size: 18px;
-}
-</style>
+<template>
+  <div class="shopfloor-dashboard">
+    <div class="dash-fit" ref="fitEl">
+    <header class="dashboard-header">
+      <div class="logo-container">
+        <img :src="siteLogo" alt="Site logo" class="logo" />
+      </div>
+
+      <div class="header-center">
+        <div class="location-title">{{ facilityName }}</div>
+        <h1>Shopfloor Dashboard</h1>
+      </div>
+
+      <div class="header-right">
+        <div class="clock">{{ currentTime }}</div>
+        <select v-model="businessUnit" class="filter-select" @change="loadData">
+          <option value="">All Locations</option>
+          <option v-for="bu in businessUnits" :key="bu.businessunitid" :value="bu.businessunitid">
+            {{ bu.businessunit }}
+          </option>
+        </select>
+      </div>
+    </header>
+
+    <main class="dashboard-content">
+      <!--
+        One section per TYPE, in style order (banner, carousel, grid). Grouping
+        by display style alone merged every grid type into Recertification's
+        row and every carousel type into Recognition's, under that type's
+        heading. Each type now carries its own row titled by its own name.
+      -->
+      <template v-for="group in styledGroups" :key="group.key">
+
+        <!-- Banner - full-width strips, one per message -->
+        <section v-if="group.displaystyle === 'banner'" class="banner-section">
+          <div
+            v-for="n in group.items"
+            :key="n.notificationid"
+            class="banner-strip"
+            :style="{ backgroundColor: getTypeColor(n.typecolor) }"
+          >
+            {{ n.notification }}
+          </div>
+        </section>
+
+        <!-- Carousel - one card at a time, rotating -->
+        <section v-else-if="group.displaystyle === 'carousel'" class="recognition-section">
+          <div class="section-title recognition">{{ group.typename }}</div>
+          <div class="recognition-carousel">
+            <div
+              v-for="(rec, idx) in group.items"
+              :key="`${rec.notificationid}-${rec.employeesso}`"
+              class="recognition-card"
+              :class="{ active: idx === carouselIndex(group) }"
+            >
+              <!-- A type that names no employee is a message, not a person:
+                   no photo frame, no empty name line. -->
+              <div v-if="hasEmployee(rec)" class="recognition-photo-container">
+                <img
+                  v-if="rec.employeepicture"
+                  :src="rec.employeepicture"
+                  :alt="rec.employeename"
+                  class="recognition-photo"
+                  @error="handlePhotoError"
+                />
+                <img
+                  v-else
+                  :src="employeePhotoFallback"
+                  alt="No photo"
+                  class="recognition-photo ge-logo-fallback"
+                />
+              </div>
+              <div class="recognition-content">
+                <div v-if="hasEmployee(rec)" class="recognition-header">
+                  <div class="recognition-name">{{ rec.employeename }}</div>
+                </div>
+                <div class="recognition-message">{{ rec.notification }}</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Grid - a row of tiles, cycling a page at a time -->
+        <section v-else class="recert-section">
+          <div class="section-title recert-title">
+            <span>{{ group.typename }} ({{ group.items.length }})</span>
+            <span v-if="gridRangeLabel(group)" class="recert-range">{{ gridRangeLabel(group) }}</span>
+          </div>
+          <div
+            v-for="msg in groupDescriptions(group)"
+            :key="msg"
+            class="recert-description"
+          >
+            {{ msg }}
+          </div>
+          <div class="recert-row">
+            <div
+              v-for="rec in gridPageItems(group)"
+              :key="`grid-${rec.notificationid}-${rec.employeesso}`"
+              class="recert-tile"
+              :class="{ 'message-tile': !hasEmployee(rec) }"
+            >
+              <template v-if="hasEmployee(rec)">
+                <img
+                  v-if="rec.employeepicture"
+                  :src="rec.employeepicture"
+                  :alt="rec.employeename"
+                  class="recert-photo"
+                  @error="handlePhotoError"
+                />
+                <img
+                  v-else
+                  :src="employeePhotoFallback"
+                  alt="No photo"
+                  class="recert-photo ge-logo-fallback"
+                />
+                <div class="recert-name">{{ rec.employeename || rec.employeesso }}</div>
+              </template>
+              <!-- No employee: the message IS the tile, so a grid type like
+                   Awareness does not render rows of blank placeholder faces. -->
+              <div v-else class="recert-message">{{ rec.notification }}</div>
+            </div>
+          </div>
+        </section>
+
+      </template>
+
+      <!-- Current Notifications -->
+      <section v-if="currentNotifications.length" class="notifications-section">
+        <div class="section-title" :class="getSectionClass(currentNotifications)">
+          Current Notifications
+        </div>
+        <div class="events-list">
+          <div
+            v-for="n in currentNotifications"
+            :key="n.notificationid"
+            class="event-card"
+            :class="{ resolved: n.resolved }"
+          >
+            <div class="event-indicator" :style="{ backgroundColor: getTypeColor(n.typecolor) }"></div>
+            <div class="event-content">
+              <div class="event-title">{{ n.notification }}</div>
+              <div class="event-time">
+                <template v-if="n.resolved">
+                  <strong>RESOLVED</strong>
+                </template>
+                <template v-else>
+                  <strong>{{ formatTime(n.starttime) }}</strong>
+                  <span v-if="n.endtime"> - {{ formatTime(n.endtime) }}</span>
+                </template>
+              </div>
+            </div>
+            <template v-if="n.ticketnumber">
+              <a v-if="getTicketUrl(n.ticketnumber)" :href="getTicketUrl(n.ticketnumber)" target="_blank" class="event-ticket">
+                {{ n.ticketnumber }}
+              </a>
+              <span v-else class="event-ticket">{{ n.ticketnumber }}</span>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <!-- Upcoming Notifications -->
+      <section v-if="upcomingNotifications.length" class="notifications-section">
+        <div class="section-title upcoming">Upcoming</div>
+        <div class="events-list">
+          <div
+            v-for="n in upcomingNotifications"
+            :key="n.notificationid"
+            class="event-card"
+          >
+            <div class="event-indicator" :style="{ backgroundColor: getTypeColor(n.typecolor) }"></div>
+            <div class="event-content">
+              <div class="event-title">{{ n.notification }}</div>
+              <div class="event-time">
+                <strong>{{ formatDateTime(n.starttime) }}</strong>
+              </div>
+            </div>
+            <template v-if="n.ticketnumber">
+              <a v-if="getTicketUrl(n.ticketnumber)" :href="getTicketUrl(n.ticketnumber)" target="_blank" class="event-ticket">
+                {{ n.ticketnumber }}
+              </a>
+              <span v-else class="event-ticket">{{ n.ticketnumber }}</span>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <!-- No notifications -->
+      <div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !styledGroups.length" class="no-events">
+        No active notifications
+      </div>
+
+      <div v-if="loading" class="loading">Loading...</div>
+    </main>
+
+    <footer class="dashboard-footer">
+      Auto-refreshes every 30 seconds
+    </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { notificationsApi, businessUnitsApi, dashboardDefaultsApi } from '@/api'
+import { getFacilityName, getSiteLogo, getServicenowUrls } from '@/utils/siteSettings'
+import { withBase } from '@/utils/basePath'
+
+const loading = ref(true)
+const facilityName = ref('ShopDB')
+const siteLogo = ref(withBase('/ge-aerospace-logo.svg'))
+// Employee photo placeholder: the shipped GE monogram (square avatar). Kept
+// separate from siteLogo so a blank/broken site_logo setting never leaves an
+// employee tile with no image.
+const employeePhotoFallback = ref(withBase('/ge-monogram.svg'))
+// ServiceNow ticket-link config; loaded on mount. Empty/disabled = plain text.
+const servicenowConfig = ref({ enabled: true, incidentUrl: '', changeUrl: '' })
+const businessUnit = ref('')
+const businessUnits = ref([])
+const notifications = ref({ current: [], upcoming: [] })
+// Layout-config fingerprint from the feed; when it changes the kiosk reloads.
+const loadedConfigVersion = ref(null)
+
+let refreshInterval = null
+let recognitionInterval = null
+let recertPageInterval = null
+
+// Fit-to-viewport: the board is a fixed 1920-wide design; scale the whole thing
+// to fill the screen so a TV shows everything with no scrolling, at any size.
+const fitEl = ref(null)
+let resizeObserver = null
+function fitToScreen() {
+  const el = fitEl.value
+  if (!el) return
+  const w = el.offsetWidth || 1
+  const h = el.offsetHeight || 1
+  const scale = Math.min(window.innerWidth / w, window.innerHeight / h)
+  el.style.transform = `scale(${scale})`
+  el.style.left = `${Math.max(0, (window.innerWidth - w * scale) / 2)}px`
+}
+
+// The board groups cards by each type's configured display style, so any custom
+// type set to carousel/grid/banner renders that way - not just the built-ins.
+const SPECIAL_STYLES = ['carousel', 'grid', 'banner']
+
+// Sections render in style order, so the board keeps its shape as types come
+// and go: strips at the top, then rotating cards, then tile rows.
+const STYLE_ORDER = { banner: 0, carousel: 1, grid: 2 }
+
+// One row per TYPE, unless types opt into a shared boardcategory - Change,
+// Awareness and Incident under one "Alerts" heading, say, while Recognition and
+// Recertification keep rows of their own. Grouping by display style alone
+// folded every grid type into one row under someone else's name.
+// The style is part of the key: a category cannot merge a banner with a tile
+// row, so same-category types of different styles still render separately.
+const styledGroups = computed(() => {
+  const groups = new Map()
+  for (const n of notifications.value.current) {
+    if (!SPECIAL_STYLES.includes(n.displaystyle)) continue
+    const heading = (n.boardcategory || '').trim() || n.typename || n.displaystyle
+    const key = `${n.displaystyle}|${heading}`
+    if (!groups.has(key)) {
+      groups.set(key, {
+        key,
+        typename: heading,
+        displaystyle: n.displaystyle,
+        items: []
+      })
+    }
+    groups.get(key).items.push(n)
+  }
+  return [...groups.values()].sort((a, b) =>
+    (STYLE_ORDER[a.displaystyle] - STYLE_ORDER[b.displaystyle]) ||
+    a.typename.localeCompare(b.typename)
+  )
+})
+
+// A card belongs to a person only if it names one; a plain message type set to
+// carousel or grid has no SSO and must not render a placeholder face.
+function hasEmployee(n) {
+  return !!(n.employeesso || n.employeename || n.employeepicture)
+}
+
+// Distinct messages shown once above a grid row (the per-person tiles carry
+// only photo + name, so the message would otherwise have nowhere to go).
+function groupDescriptions(group) {
+  if (!group.items.some(hasEmployee)) return []
+  const seen = new Set()
+  const out = []
+  for (const item of group.items) {
+    const msg = (item.notification || '').trim()
+    if (msg && !seen.has(msg)) { seen.add(msg); out.push(msg) }
+  }
+  return out
+}
+
+// Rotation state is per group, keyed by type: two grid rows page independently
+// instead of sharing one index.
+const GRID_PAGE_SIZE = 8
+const carouselIndexes = ref({})
+const gridPages = ref({})
+
+function carouselIndex(group) {
+  return (carouselIndexes.value[group.key] || 0) % Math.max(1, group.items.length)
+}
+function gridPageCount(group) {
+  return Math.max(1, Math.ceil(group.items.length / GRID_PAGE_SIZE))
+}
+function gridPageItems(group) {
+  const page = (gridPages.value[group.key] || 0) % gridPageCount(group)
+  const start = page * GRID_PAGE_SIZE
+  return group.items.slice(start, start + GRID_PAGE_SIZE)
+}
+function gridRangeLabel(group) {
+  if (gridPageCount(group) <= 1) return ''
+  const page = (gridPages.value[group.key] || 0) % gridPageCount(group)
+  const start = page * GRID_PAGE_SIZE
+  const end = Math.min(start + GRID_PAGE_SIZE, group.items.length)
+  return `${start + 1}-${end} of ${group.items.length}`
+}
+
+const currentNotifications = computed(() =>
+  notifications.value.current.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
+)
+
+const upcomingNotifications = computed(() =>
+  notifications.value.upcoming.filter(n => !SPECIAL_STYLES.includes(n.displaystyle))
+)
+
+// Clock
+const currentTime = ref('')
+function updateClock() {
+  const now = new Date()
+  currentTime.value = now.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+onMounted(async () => {
+  updateClock()
+  setInterval(updateClock, 1000)
+
+  getFacilityName().then(name => { facilityName.value = name })
+  getSiteLogo().then(logo => { siteLogo.value = logo })
+  getServicenowUrls().then(config => { servicenowConfig.value = config })
+
+  // Load business units
+  try {
+    const response = await businessUnitsApi.list()
+    businessUnits.value = response.data.data || []
+  } catch (err) {
+    console.error('Error loading business units:', err)
+  }
+
+  // Auto-select this kiosk's business unit from its IP (visitor location),
+  // unless one was already chosen. Falls back to "all" when the IP is unmapped.
+  if (!businessUnit.value) {
+    try {
+      const response = await dashboardDefaultsApi.visitorLocation()
+      if (response.data.data?.businessunitid) {
+        businessUnit.value = response.data.data.businessunitid
+      }
+    } catch (err) {
+      console.error('Error resolving visitor location:', err)
+    }
+  }
+
+  await loadData()
+
+  // Auto-refresh every 30 seconds
+  refreshInterval = setInterval(loadData, 30000)
+
+  // Advance every carousel row every 8 seconds. Each row keeps its own index,
+  // so a row of three cards does not drag a row of ten along with it.
+  recognitionInterval = setInterval(() => {
+    for (const group of styledGroups.value) {
+      if (group.displaystyle !== 'carousel' || group.items.length < 2) continue
+      const next = (carouselIndexes.value[group.key] || 0) + 1
+      carouselIndexes.value[group.key] = next % group.items.length
+    }
+  }, 8000)
+
+  // Page every grid row every 7 seconds, each on its own page count.
+  recertPageInterval = setInterval(() => {
+    for (const group of styledGroups.value) {
+      if (group.displaystyle !== 'grid') continue
+      const pages = gridPageCount(group)
+      if (pages < 2) continue
+      gridPages.value[group.key] = ((gridPages.value[group.key] || 0) + 1) % pages
+    }
+  }, 7000)
+
+  // Scale to fit once rendered, and re-fit whenever the content or window
+  // changes size (new data, banner cycling, resolution change).
+  await nextTick()
+  fitToScreen()
+  resizeObserver = new ResizeObserver(() => fitToScreen())
+  if (fitEl.value) resizeObserver.observe(fitEl.value)
+  window.addEventListener('resize', fitToScreen)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) clearInterval(refreshInterval)
+  if (recognitionInterval) clearInterval(recognitionInterval)
+  if (recertPageInterval) clearInterval(recertPageInterval)
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', fitToScreen)
+})
+
+async function loadData() {
+  try {
+    const params = {}
+    if (businessUnit.value) {
+      params.businessunit = businessUnit.value
+    }
+    const response = await notificationsApi.getShopfloor(params)
+    const data = response.data.data || { current: [], upcoming: [] }
+
+    // Reload the kiosk when the board's layout config changes, so type/style
+    // edits (and deploys, via SHOPFLOOR_BUILD) reach already-open pages without
+    // anyone touching the machine.
+    const version = data.configversion
+    if (version) {
+      if (loadedConfigVersion.value && loadedConfigVersion.value !== version) {
+        window.location.reload()
+        return
+      }
+      loadedConfigVersion.value = version
+    }
+
+    notifications.value = { current: data.current || [], upcoming: data.upcoming || [] }
+  } catch (err) {
+    console.error('Error loading shopfloor data:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+function getTypeColor(typecolor) {
+  // Types store a hex color, used directly. Only legacy Bootstrap color names
+  // still need aliasing; anything else (a hex) passes straight through.
+  const aliases = {
+    success: '#04b962',
+    warning: '#ff8800',
+    danger: '#f5365c',
+    info: '#14abef',
+    primary: '#7934f3',
+    secondary: '#94614f'
+  }
+  return aliases[typecolor] || typecolor || '#14abef'
+}
+
+function getSectionClass(notifications) {
+  // Use danger color if any active incidents
+  const hasIncident = notifications.some(n => n.typecolor === 'danger' && !n.resolved)
+  return hasIncident ? 'danger' : ''
+}
+
+function formatTime(dateStr) {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function formatDateTime(dateStr) {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+function getTicketUrl(ticketnumber) {
+  // Return a URL only when ServiceNow is enabled and a matching template is set.
+  // Null means "render the ticket number as plain text, no link".
+  if (!ticketnumber) return null
+  const config = servicenowConfig.value
+  if (!config.enabled) return null
+  if (ticketnumber.startsWith('GEINC') && config.incidentUrl) {
+    return config.incidentUrl.replace('{ticket}', ticketnumber)
+  }
+  if (ticketnumber.startsWith('GECHG') && config.changeUrl) {
+    return config.changeUrl.replace('{ticket}', ticketnumber)
+  }
+  return null
+}
+
+function handlePhotoError(e) {
+  // Photo URL 404'd (e.g. no photo file for this SSO): fall back to the GE
+  // monogram. Guard against a loop if the fallback itself fails to load.
+  if (e.target.dataset.fellback) { return }
+  e.target.dataset.fellback = '1'
+  e.target.src = employeePhotoFallback.value
+  e.target.classList.add('ge-logo-fallback')
+}
+</script>
+
+<style scoped>
+.shopfloor-dashboard {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: #00003d;
+  color: #fff;
+  font-family: Verdana, Geneva, Tahoma, 'Inter Variable', sans-serif;
+  overflow: hidden;
+}
+
+/* Fixed 1920-wide design surface; JS scales it to fill the viewport (TV) so
+   the whole board is visible with no scrolling. */
+.dash-fit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1600px;
+  min-height: 900px;
+  display: flex;
+  flex-direction: column;
+  transform-origin: top left;
+}
+
+.dashboard-header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 30px;
+  padding: 20px 40px;
+  border-bottom: 3px solid #4181ff;
+}
+
+.logo {
+  height: 90px;
+  width: auto;
+}
+
+.header-center {
+  text-align: center;
+}
+
+.location-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #b8c4d8;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+
+.header-center h1 {
+  font-size: 28px;
+  font-weight: 700;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin: 0;
+}
+
+.header-right {
+  text-align: right;
+}
+
+.clock {
+  font-size: 28px;
+  font-weight: 600;
+  color: #4181ff;
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 10px;
+}
+
+.filter-select {
+  padding: 10px 16px;
+  font-size: 16px;
+  font-weight: 600;
+  background: #1a1a5e;
+  color: #fff;
+  border: 2px solid #4181ff;
+  border-radius: 6px;
+  cursor: pointer;
+  min-width: 200px;
+}
+
+.dashboard-content {
+  padding: 20px 40px;
+}
+
+.section-title {
+  font-size: 22px;
+  font-weight: 700;
+  padding: 12px 20px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 15px;
+  background: #4181ff;
+}
+
+.section-title.recognition {
+  background: #ffc107;
+  color: #3a2e00;
+}
+
+/* Recertification grid - blue, compact tiles so 20-30 people are all visible
+   at once (no carousel to wait through) */
+.recert-section {
+  margin-bottom: 25px;
+}
+.section-title.recert-title {
+  background: #0d6efd;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.recert-range {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  opacity: 0.85;
+}
+.recert-description {
+  font-size: 22px;
+  font-weight: 600;
+  color: #cbd5e1;
+  margin: -4px 0 14px;
+  line-height: 1.35;
+}
+/* Single row that cycles through pages of employees */
+.recert-row {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 14px;
+}
+.recert-tile {
+  background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
+  border: 2px solid #0d6efd;
+  border-radius: 10px;
+  padding: 14px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+}
+.recert-photo {
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid #0d6efd;
+  background: #1a1a2e;
+}
+.recert-photo.ge-logo-fallback {
+  object-fit: contain;
+  padding: 12px;
+  background: #fff;
+}
+.recert-name {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.15;
+  /* Always reserve two lines so a name that wraps does not make its tile
+     taller and shift the whole grid. Longer names clamp with an ellipsis. */
+  height: 2.3em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.section-title.danger {
+  background: #f5365c;
+}
+
+.section-title.upcoming {
+  background: #6c757d;
+}
+
+/* Recognition carousel */
+.banner-section {
+  margin-bottom: 25px;
+}
+
+.banner-strip {
+  padding: 22px 30px;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  color: #fff;
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  text-wrap: balance;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+.recognition-section {
+  margin-bottom: 25px;
+}
+
+.recognition-carousel {
+  position: relative;
+  min-height: 170px;
+}
+
+.recognition-card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #4a3a0a 0%, #2a2200 100%);
+  border: 3px solid #ffc107;
+  border-radius: 12px;
+  padding: 20px 25px;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.recognition-card.active {
+  opacity: 1;
+  transform: translateY(0);
+  position: relative;
+}
+
+.recognition-photo {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid #ffc107;
+  background: #1a1a2e;
+}
+
+.recognition-photo.ge-logo-fallback {
+  object-fit: contain;
+  padding: 20px;
+  background: #fff;
+}
+
+.recognition-content {
+  flex: 1;
+}
+
+.recognition-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.recognition-star {
+  font-size: 48px;
+  color: #ffc107;
+  margin-right: 20px;
+  animation: starPulse 2s ease-in-out infinite;
+}
+
+
+@keyframes starPulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+.recognition-name {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.recognition-message {
+  font-size: 24px;
+  color: #ccc;
+  line-height: 1.4;
+}
+
+/* Event cards */
+.notifications-section {
+  margin-bottom: 25px;
+}
+
+.events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.event-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  color: #00003d;
+  border-radius: 8px;
+  padding: 15px 20px 15px 30px;
+  gap: 15px;
+}
+
+.event-card.resolved {
+  opacity: 0.6;
+  background: #e9ecef;
+}
+
+.event-indicator {
+  /* Type color spanning the whole left edge of the card (old-site style). */
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  flex-shrink: 0;
+}
+
+.event-content {
+  flex: 1;
+}
+
+.event-title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.event-time {
+  font-size: 18px;
+  color: #666;
+  margin-top: 5px;
+}
+
+.event-time strong {
+  color: #00003d;
+}
+
+.event-ticket {
+  font-size: 18px;
+  font-weight: 700;
+  background: #00003d;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 6px;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.event-ticket:hover {
+  background: #4181ff;
+}
+
+.no-events, .loading {
+  text-align: center;
+  font-size: 28px;
+  font-weight: 600;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+}
+
+.dashboard-footer {
+  margin-top: auto;
+  background: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  padding: 12px;
+  font-size: 18px;
+}
+</style>
diff --git a/plugins/notifications/api/routes.py b/plugins/notifications/api/routes.py
index 844652e..cf9275b 100644
--- a/plugins/notifications/api/routes.py
+++ b/plugins/notifications/api/routes.py
@@ -157,6 +157,13 @@ def _apply_display_fields(t, data):
         if ds not in _DISPLAY_STYLES:
             return "displaystyle must be one of: %s" % ", ".join(_DISPLAY_STYLES)
         t.displaystyle = ds
+    if 'boardcategory' in data:
+        category = (data.get('boardcategory') or '').strip()
+        if len(category) > 50:
+            return "boardcategory must be 50 characters or fewer"
+        # Blank stores as NULL: "no category" is the absence of one, not the
+        # empty-string category that every uncategorised type would share.
+        t.boardcategory = category or None
     if 'gracewindowminutes' in data:
         raw = data.get('gracewindowminutes')
         raw = 0 if raw in (None, '') else raw
@@ -178,11 +185,11 @@ def _config_version():
     reach pages that are already open."""
     types = NotificationType.query.order_by(NotificationType.notificationtypeid).all()
     parts = [
-        "%s|%s|%s|%d|%d|%s|%s|%s|%d|%d" % (
+        "%s|%s|%s|%d|%d|%s|%s|%s|%d|%d|%s" % (
             t.notificationtypeid, t.typecolor, t.displaystyle,
             int(bool(t.splitperemployee)), int(bool(t.showemployeephoto)),
             t.expirymode, t.expirydays, t.expiryhour, int(bool(t.isactive)),
-            int(t.gracewindowminutes or 0),
+            int(t.gracewindowminutes or 0), t.boardcategory or '',
         )
         for t in types
     ]
@@ -779,8 +786,11 @@ def get_shopfloor_notifications():
             'resolved': is_resolved,
             'typename': ntype.typename if ntype else None,
             'typecolor': ntype.typecolor if ntype else None,
-            # Per-type display behavior the dashboard groups/renders by.
+            # Per-type display behavior the dashboard groups/renders by. A
+            # boardcategory puts several types in one row under that name;
+            # blank gives the type a row of its own.
             'displaystyle': (ntype.displaystyle or 'standard') if ntype else 'standard',
+            'boardcategory': (ntype.boardcategory or '') if ntype else '',
         }
 
         # Employee info (photo only when the type wants it)
diff --git a/plugins/notifications/frontend/views/NotificationTypesList.vue b/plugins/notifications/frontend/views/NotificationTypesList.vue
index 1303047..40e717d 100644
--- a/plugins/notifications/frontend/views/NotificationTypesList.vue
+++ b/plugins/notifications/frontend/views/NotificationTypesList.vue
@@ -32,7 +32,10 @@
                 <span class="swatch" :style="{ backgroundColor: swatchColor(t.typecolor) }"></span>
                 <span class="mono">{{ t.typecolor }}</span>
               </td>
-              <td><span class="badge">{{ t.displaystyle || 'standard' }}</span></td>
+              <td>
+                <span class="badge">{{ t.displaystyle || 'standard' }}</span>
+                <span v-if="t.boardcategory" class="badge badge-secondary">{{ t.boardcategory }}</span>
+              </td>
               <td>
                 <span v-if="t.splitperemployee" class="badge badge-success">split</span>
                 <span v-if="t.showemployeephoto" class="badge badge-success">photo</span>
@@ -87,6 +90,17 @@
             </select>
           </label>
 
+          <label class="field">
+            <span>Board category (optional)</span>
+            <input v-model="form.boardcategory" type="text" maxlength="50"
+                   placeholder="its own row" />
+            <small class="muted">
+              Types sharing a category share one row on the shopfloor board,
+              under the category name. Blank gives this type a row of its own.
+              Only types with the same display style can share a row.
+            </small>
+          </label>
+
           <label class="field">
             <span>Keep showing after end (minutes)</span>
             <input v-model.number="form.gracewindowminutes" type="number"
@@ -215,6 +229,7 @@ function openNew() {
     expirydays: null,
     expiryhour: null,
     gracewindowminutes: 0,
+    boardcategory: '',
     isactive: true
   }
   editing.value = true
@@ -234,6 +249,7 @@ function openEdit(t) {
     expirydays: t.expirydays ?? null,
     expiryhour: t.expiryhour ?? null,
     gracewindowminutes: t.gracewindowminutes ?? 0,
+    boardcategory: t.boardcategory || '',
     isactive: t.isactive !== false
   }
   editing.value = true
@@ -300,7 +316,10 @@ onMounted(load)
   z-index: 1000;
 }
 .modal-panel {
-  background: var(--bg-card);
+  /* Solid, not var(--bg-card): the card variable is translucent in dark mode
+     (rgba(0,0,61,0.4)) so cards glass over the page, which left this dialog
+     see-through with the table legible behind it. */
+  background: var(--bg-card-solid);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
diff --git a/plugins/notifications/migrations/versions/0004_boardcategory.py b/plugins/notifications/migrations/versions/0004_boardcategory.py
new file mode 100644
index 0000000..e365b09
--- /dev/null
+++ b/plugins/notifications/migrations/versions/0004_boardcategory.py
@@ -0,0 +1,47 @@
+"""Add notificationtypes.boardcategory (shared heading on the shopfloor board).
+
+The board grouped cards by display style alone, so every type set to grid landed
+inside the Recertification row and every carousel type inside Recognition's,
+under a heading that named someone else's type. Each type now gets a row of its
+own; this column is the opt-in for the other direction - several types that
+belong together (Change, Awareness, Incident) share one row under a category
+name instead of taking three.
+
+Idempotent; downgrade drops the column.
+
+Revision ID: notifications0004category
+Revises: notifications0003grace
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+revision = 'notifications0004category'
+down_revision = 'notifications0003grace'
+branch_labels = None
+depends_on = None
+
+_TABLE = 'notificationtypes'
+_COLUMN = 'boardcategory'
+
+
+def _column_names(insp, table):
+    return {c['name'] for c in insp.get_columns(table)}
+
+
+def upgrade():
+    bind = op.get_bind()
+    insp = sa.inspect(bind)
+    if _TABLE not in insp.get_table_names():
+        return
+    if _COLUMN not in _column_names(insp, _TABLE):
+        op.add_column(_TABLE, sa.Column(_COLUMN, sa.String(50), nullable=True))
+
+
+def downgrade():
+    bind = op.get_bind()
+    insp = sa.inspect(bind)
+    if _TABLE not in insp.get_table_names():
+        return
+    if _COLUMN in _column_names(insp, _TABLE):
+        op.drop_column(_TABLE, _COLUMN)
diff --git a/plugins/notifications/models/notification.py b/plugins/notifications/models/notification.py
index 4204a18..3b91fa2 100644
--- a/plugins/notifications/models/notification.py
+++ b/plugins/notifications/models/notification.py
@@ -83,6 +83,12 @@ class NotificationType(db.Model):
     gracewindowminutes = db.Column(db.Integer, nullable=False,
                                    server_default='0', default=0)
 
+    # Optional shared heading on the shopfloor board. Blank (the default) gives
+    # the type a row of its own under its own name; types sharing a category
+    # share one row under that category name, provided they also share a
+    # displaystyle - a banner and a tile row cannot be the same row.
+    boardcategory = db.Column(db.String(50), nullable=True)
+
     def __repr__(self):
         return f"<NotificationType {self.typename}>"
 
@@ -100,7 +106,8 @@ class NotificationType(db.Model):
             'splitperemployee': bool(self.splitperemployee),
             'showemployeephoto': bool(self.showemployeephoto),
             'displaystyle': self.displaystyle or 'standard',
-            'gracewindowminutes': int(self.gracewindowminutes or 0)
+            'gracewindowminutes': int(self.gracewindowminutes or 0),
+            'boardcategory': self.boardcategory or ''
         }
 
 
diff --git a/tests/test_plugin_migrations.py b/tests/test_plugin_migrations.py
index 8a86632..5acbd2e 100644
--- a/tests/test_plugin_migrations.py
+++ b/tests/test_plugin_migrations.py
@@ -64,8 +64,9 @@ EXPECTED_HEAD_REVISION['network'] = 'network0002model'
 # printedparts is post-cutover: its 0001 really creates its tables; 0004 adds
 # the per-transaction revision column.
 EXPECTED_HEAD_REVISION['printedparts'] = 'printedparts0004txnrev'
-# notifications indexes businessunitid, then adds the per-type grace window.
-EXPECTED_HEAD_REVISION['notifications'] = 'notifications0003grace'
+# notifications indexes businessunitid, then adds the per-type grace window and
+# the shared board category.
+EXPECTED_HEAD_REVISION['notifications'] = 'notifications0004category'
 
 # Plugins built after the cutover: their 0001 baseline really creates tables the
 # core chain never owned.
diff --git a/tests/test_plugins/test_board_category.py b/tests/test_plugins/test_board_category.py
new file mode 100644
index 0000000..160f28c
--- /dev/null
+++ b/tests/test_plugins/test_board_category.py
@@ -0,0 +1,117 @@
+"""Tests for notificationtypes.boardcategory (shared row on the shopfloor board).
+
+The board grouped cards by display style alone, so every type set to grid landed
+in the Recertification row and every carousel type in Recognition's, under a
+heading naming someone else's type. Each type now gets a row of its own, and
+this column is the opt-in for the other direction: Change, Awareness and
+Incident share one row under a category name.
+
+The grouping itself is frontend (ShopfloorDashboard.vue); what is pinned here is
+the contract it groups on - the feed must carry boardcategory per card, and the
+type API must round-trip it.
+"""
+
+from plugins.notifications.models import Notification, NotificationType
+
+
+def _make_type(db, typename, displaystyle='grid', boardcategory=None):
+    t = NotificationType(typename=typename, typecolor='#17a2b8', isactive=True,
+                         displaystyle=displaystyle, boardcategory=boardcategory)
+    db.session.add(t)
+    db.session.commit()
+    return t
+
+
+def _make_note(db, ntype, text):
+    n = Notification(notificationtypeid=ntype.notificationtypeid,
+                     notification=text, businessunitid=None,
+                     isactive=True, isshopfloor=True)
+    db.session.add(n)
+    db.session.commit()
+    return n
+
+
+def _current(client):
+    resp = client.get('/api/notifications/shopfloor')
+    assert resp.status_code == 200, resp.get_json()
+    return resp.get_json()['data']['current']
+
+
+def test_feed_carries_the_category_per_card(client, db):
+    """The dashboard groups on this field, so it has to reach the card."""
+    ntype = _make_type(db, 'Awareness', boardcategory='Alerts')
+    _make_note(db, ntype, 'watch your step')
+
+    card = _current(client)[0]
+    assert card['boardcategory'] == 'Alerts'
+    assert card['typename'] == 'Awareness'
+    assert card['displaystyle'] == 'grid'
+
+
+def test_uncategorised_type_reports_an_empty_category(client, db):
+    """Blank, not null: the dashboard falls back to the type name for a row."""
+    ntype = _make_type(db, 'Recertification')
+    _make_note(db, ntype, 'forklift cert due')
+
+    assert _current(client)[0]['boardcategory'] == ''
+
+
+def test_types_sharing_a_category_keep_their_own_names(client, db):
+    """Grouping is the dashboard's job; the feed must not flatten the types."""
+    change = _make_type(db, 'Change', boardcategory='Alerts')
+    incident = _make_type(db, 'Incident', boardcategory='Alerts')
+    _make_note(db, change, 'line 3 retooling')
+    _make_note(db, incident, 'press 12 down')
+
+    cards = _current(client)
+    assert {c['typename'] for c in cards} == {'Change', 'Incident'}
+    assert {c['boardcategory'] for c in cards} == {'Alerts'}
+
+
+def test_api_round_trips_the_category(client, db, auth_headers):
+    create = client.post('/api/notifications/types',
+                         json={'typename': 'Awareness', 'displaystyle': 'grid',
+                               'boardcategory': 'Alerts'},
+                         headers=auth_headers)
+    assert create.status_code in (200, 201), create.get_json()
+    typeid = create.get_json()['data']['notificationtypeid']
+    assert create.get_json()['data']['boardcategory'] == 'Alerts'
+
+    listed = client.get('/api/notifications/types', headers=auth_headers)
+    row = next(t for t in listed.get_json()['data']
+               if t['notificationtypeid'] == typeid)
+    assert row['boardcategory'] == 'Alerts'
+
+
+def test_blank_category_stores_as_null_not_an_empty_group(client, db, auth_headers):
+    """Every uncategorised type sharing the empty string would be one big row."""
+    create = client.post('/api/notifications/types',
+                         json={'typename': 'Solo', 'boardcategory': '   '},
+                         headers=auth_headers)
+    assert create.status_code in (200, 201), create.get_json()
+    typeid = create.get_json()['data']['notificationtypeid']
+
+    stored = db.session.get(NotificationType, typeid)
+    assert stored.boardcategory is None
+    assert create.get_json()['data']['boardcategory'] == ''
+
+
+def test_api_rejects_an_overlong_category(client, db, auth_headers):
+    resp = client.post('/api/notifications/types',
+                       json={'typename': 'Bad', 'boardcategory': 'x' * 51},
+                       headers=auth_headers)
+
+    assert resp.status_code == 400
+    assert 'boardcategory' in resp.get_data(as_text=True)
+
+
+def test_category_change_moves_the_config_version(client, db, auth_headers):
+    """Open kiosks reload on a layout change; a re-grouped board is one."""
+    ntype = _make_type(db, 'Awareness')
+    before = client.get('/api/notifications/shopfloor').get_json()['data']['configversion']
+
+    client.put(f'/api/notifications/types/{ntype.notificationtypeid}',
+               json={'boardcategory': 'Alerts'}, headers=auth_headers)
+
+    after = client.get('/api/notifications/shopfloor').get_json()['data']['configversion']
+    assert before != after