Per-type board rows with shared categories, a network device IP field, and two dark-mode dialogs

2026-08-07 10:43:32 -04:00
parent bcf7a009f8
commit 7c5b1bc74e
12 changed files with 1154 additions and 829 deletions
--- a/frontend/DEVELOPMENT-STANDARDS.md
+++ b/frontend/DEVELOPMENT-STANDARDS.md
@@ -96,6 +96,22 @@ Use `PrintersList.vue` as the reference for new list pages. It has NO scoped sty

 Dark mode is automatic via `@media (prefers-color-scheme: dark)`. Using CSS variables ensures colors adapt automatically - no extra work needed per page.

+## Data Entry: Page or Modal
+
+Both patterns are in use on purpose. Pick by what the record IS, not by how big the form feels today.
+
+**Routed form page** (`views/<Thing>Form.vue` + a route) when the record has its own detail page and its own URL: machines, PCs, printers, network devices, measuring tools, USB devices, applications, knowledge-base articles, notifications, printed items. These forms are long, often carry an image upload, a map-position picker or relationship editing, and someone will want to link straight to one.
+
+**Modal over its list** when the record is reference data that only exists inside the list it belongs to: every `*TypesList`, plus locations, vendors, models, VLANs, subnets, support teams, custom fields, API tokens, printer drivers, dashboard defaults. The form is a handful of fields, and keeping the list visible behind the dialog is the point.
+
+Rule of thumb: **a thing with a detail page gets a form page; a lookup row gets a modal.**
+
+Modal rules (from the overlay-close fix, commit d8fe0a4):
+
+- A modal holding typed input must NOT close on overlay click or Escape. Losing a part-filled form to a stray click is not an acceptable failure.
+- A confirmation dialog MAY close on overlay click (`@click.self`), since it holds nothing to lose.
+- The panel background is `var(--bg-card-solid)`, never `var(--bg-card)`: the card variable is translucent in dark mode, which leaves a dialog see-through over the overlay. The shared `.modal` in `style.css` already does this; hand-rolled `.modal-panel` rules must too.
+
 ## Component Organization

 - **Global styles**: `src/assets/style.css`
--- a/frontend/src/views/ShopfloorDashboard.vue
+++ b/frontend/src/views/ShopfloorDashboard.vue
@@ -23,10 +23,18 @@
    </header>

    <main class="dashboard-content">
-      <!-- Banner - single prominent full-width message -->
-      <section v-if="banners.length" class="banner-section">
+      <!--
+        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 banners"
+            v-for="n in group.items"
            :key="n.notificationid"
            class="banner-strip"
            :style="{ backgroundColor: getTypeColor(n.typecolor) }"
@@ -35,17 +43,19 @@
          </div>
        </section>

-      <!-- Recognition Carousel -->
-      <section v-if="recognitions.length" class="recognition-section">
-        <div class="section-title recognition">Employee Recognition</div>
+        <!-- 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 recognitions"
+              v-for="(rec, idx) in group.items"
              :key="`${rec.notificationid}-${rec.employeesso}`"
              class="recognition-card"
-            :class="{ active: idx === currentRecognition }"
+              :class="{ active: idx === carouselIndex(group) }"
            >
-            <div class="recognition-photo-container">
+              <!-- 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"
@@ -61,7 +71,7 @@
                />
              </div>
              <div class="recognition-content">
-              <div class="recognition-header">
+                <div v-if="hasEmployee(rec)" class="recognition-header">
                  <div class="recognition-name">{{ rec.employeename }}</div>
                </div>
                <div class="recognition-message">{{ rec.notification }}</div>
@@ -70,15 +80,14 @@
          </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">
+        <!-- Grid - a row of tiles, cycling a page at a time -->
+        <section v-else class="recert-section">
          <div class="section-title recert-title">
-          <span>Recertification Required ({{ recertifications.length }})</span>
-          <span v-if="recertRangeLabel" class="recert-range">{{ recertRangeLabel }}</span>
+            <span>{{ group.typename }} ({{ group.items.length }})</span>
+            <span v-if="gridRangeLabel(group)" class="recert-range">{{ gridRangeLabel(group) }}</span>
          </div>
          <div
-          v-for="msg in recertDescriptions"
+            v-for="msg in groupDescriptions(group)"
            :key="msg"
            class="recert-description"
          >
@@ -86,10 +95,12 @@
          </div>
          <div class="recert-row">
            <div
-            v-for="rec in recertPage"
-            :key="`recert-${rec.notificationid}-${rec.employeesso}`"
+              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"
@@ -104,10 +115,16 @@
                  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)">
@@ -170,7 +187,7 @@
      </section>

      <!-- No notifications -->
-      <div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !recognitions.length && !recertifications.length && !banners.length" class="no-events">
+      <div v-if="!loading && !currentNotifications.length && !upcomingNotifications.length && !styledGroups.length" class="no-events">
        No active notifications
      </div>

@@ -202,7 +219,6 @@ 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)

@@ -228,49 +244,81 @@ function fitToScreen() {
 // 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')
-)
+// 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 }

-const recertifications = computed(() =>
-  notifications.value.current.filter(n => n.displaystyle === 'grid')
-)
+// 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)
+  )
+})

-const banners = computed(() =>
-  notifications.value.current.filter(n => n.displaystyle === 'banner')
-)
+// 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 training descriptions shown once above the grid (the per-person
-// tiles only carry photo + name).
-const recertDescriptions = computed(() => {
+// 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 r of recertifications.value) {
-    const msg = (r.notification || '').trim()
+  for (const item of group.items) {
+    const msg = (item.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}`
-})
+// 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))
@@ -325,17 +373,23 @@ onMounted(async () => {
  // Auto-refresh every 30 seconds
  refreshInterval = setInterval(loadData, 30000)

-  // Rotate recognition carousel every 8 seconds
+  // 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(() => {
-    if (recognitions.value.length > 1) {
-      currentRecognition.value = (currentRecognition.value + 1) % recognitions.value.length
+    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)

-  // Cycle the recertification row through pages of employees every 7 seconds.
+  // Page every grid row every 7 seconds, each on its own page count.
  recertPageInterval = setInterval(() => {
-    if (recertPageCount.value > 1) {
-      currentRecertPage.value = (currentRecertPage.value + 1) % recertPageCount.value
+    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)

--- a/plugins/computers/frontend/views/AccessProtocolsList.vue
+++ b/plugins/computers/frontend/views/AccessProtocolsList.vue
@@ -192,7 +192,9 @@ onMounted(load)
  z-index: 1000;
 }
 .modal-panel {
-  background: var(--bg-card);
+  /* Solid: var(--bg-card) is translucent in dark mode, which made this
+     dialog see-through. */
+  background: var(--bg-card-solid);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
--- a/plugins/network/api/routes.py
+++ b/plugins/network/api/routes.py
@@ -24,9 +24,13 @@ def _upsert_primary_ip(asset, ip):
    """Create/update/clear the asset's primary IP Communication from an
    ipaddress string. No-op if the IP CommunicationType is not seeded."""
    ip = (ip or '').strip()
-    if not ip:
-        return
    comm = Communication.query.filter_by(assetid=asset.assetid, isprimary=True).first()
+    if not ip:
+        # Clearing the field clears the row's IP - it used to return early, so
+        # an address could be typed but never taken back out.
+        if comm:
+            comm.ipaddress = None
+        return
    if comm:
        comm.ipaddress = ip
        return
--- a/plugins/network/frontend/views/NetworkDeviceForm.vue
+++ b/plugins/network/frontend/views/NetworkDeviceForm.vue
@@ -112,6 +112,16 @@
                placeholder="e.g., sw-bldg1-floor2"
              />
            </div>
+            <div class="form-group">
+              <label for="ipaddress">IP Address</label>
+              <input
+                id="ipaddress"
+                v-model="form.ipaddress"
+                type="text"
+                class="form-control"
+                placeholder="e.g., 192.168.1.10"
+              />
+            </div>
            <div class="form-group">
              <label for="networkdevicetypeid">Device Type</label>
              <select id="networkdevicetypeid" v-model="form.networkdevicetypeid" class="form-control">
@@ -318,6 +328,7 @@ const form = ref({
  locationid: '',
  businessunitid: '',
  hostname: '',
+  ipaddress: '',
  networkdevicetypeid: '',
  vendorid: '',
  modelnumberid: '',
@@ -419,6 +430,9 @@ async function loadDevice() {
    form.value.mapx = data.mapx
    form.value.mapy = data.mapy
    form.value.notes = data.notes || ''
+    // The IP lives in a Communication row, not on the extension table; the API
+    // flattens it onto the response as ipaddress.
+    form.value.ipaddress = data.ipaddress || ''

    // Network device specific
    if (data.networkdevice) {
@@ -453,6 +467,7 @@ async function submitForm() {
      locationid: form.value.locationid || null,
      businessunitid: form.value.businessunitid || null,
      hostname: form.value.hostname || null,
+      ipaddress: form.value.ipaddress || null,
      networkdevicetypeid: form.value.networkdevicetypeid || null,
      vendorid: form.value.vendorid || null,
      modelnumberid: form.value.modelnumberid || null,
--- 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)
--- 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;
--- a/plugins/notifications/migrations/versions/0004_boardcategory.py
+++ 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)
--- 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 ''
        }


--- 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.
--- a/tests/test_plugins/test_board_category.py
+++ 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
--- a/tests/test_plugins/test_network_ipaddress.py
+++ b/tests/test_plugins/test_network_ipaddress.py
@@ -57,6 +57,39 @@ def test_update_network_device_ipaddress_upserts(client, db, auth_headers, netwo
    assert len(comms) == 1 and comms[0].ipaddress == '10.0.0.9'


+def test_clearing_the_ip_takes_it_back_out(client, db, auth_headers, network_setup):
+    """Blanking the form field must clear the stored IP.
+
+    The upsert helper returned early on a blank value, so an address could be
+    typed and never removed - invisible until the form grew an IP field.
+    """
+    from shopdb.core.models import Communication
+    created = client.post('/api/network', json={
+        'assetnumber': 'SW-09', 'name': 'Switch', 'ipaddress': '10.0.0.5',
+    }, headers=auth_headers).get_json()['data']
+    devid = created['networkdevice']['networkdeviceid']
+
+    cleared = client.put(f'/api/network/{devid}', json={'ipaddress': ''},
+                         headers=auth_headers)
+    assert cleared.status_code == 200, cleared.get_json()
+    assert not cleared.get_json()['data']['ipaddress']
+
+    comms = Communication.query.filter_by(assetid=created['assetid']).all()
+    assert len(comms) == 1 and comms[0].ipaddress is None
+
+
+def test_omitting_ipaddress_leaves_it_alone(client, db, auth_headers, network_setup):
+    """A PUT that never mentions the field must not wipe the stored IP."""
+    created = client.post('/api/network', json={
+        'assetnumber': 'SW-10', 'name': 'Switch', 'ipaddress': '10.0.0.7',
+    }, headers=auth_headers).get_json()['data']
+    devid = created['networkdevice']['networkdeviceid']
+
+    updated = client.put(f'/api/network/{devid}', json={'hostname': 'sw-10'},
+                         headers=auth_headers)
+    assert updated.get_json()['data']['ipaddress'] == '10.0.0.7'
+
+
 def test_seed_reference_data_creates_ip_commtype(app, db):
    """The reference-data seed now creates the IP communication type the asset
    import depends on."""