Board row ordering, type-derived row colours, and clearer upcoming events

plugins/notifications/frontend/views/NotificationTypesList.vue

@@ -33,6 +33,7 @@
                 <span class="mono">{{ t.typecolor }}</span>
               </td>
               <td>
+                <span class="badge">#{{ t.boardorder ?? 100 }}</span>
                 <span class="badge">{{ t.displaystyle || 'standard' }}</span>
                 <span v-if="t.boardcategory" class="badge badge-secondary">{{ t.boardcategory }}</span>
               </td>
@@ -90,6 +91,17 @@
             </select>
           </label>
 
+          <label class="field">
+            <span>Board order</span>
+            <input v-model.number="form.boardorder" type="number" min="0" max="999" step="10" />
+            <small class="muted">
+              Where this type's row sits on the shopfloor board, lowest first
+              (Recognition 10, Recertification 20, everything else 100). Leave
+              gaps so a new row can be slotted in without renumbering. Types
+              sharing a category take the lowest order among them.
+            </small>
+          </label>
+
           <label class="field">
             <span>Board category (optional)</span>
             <input v-model="form.boardcategory" type="text" maxlength="50"
@@ -230,6 +242,7 @@ function openNew() {
     expiryhour: null,
     gracewindowminutes: 0,
     boardcategory: '',
+    boardorder: 100,
     isactive: true
   }
   editing.value = true
@@ -250,6 +263,7 @@ function openEdit(t) {
     expiryhour: t.expiryhour ?? null,
     gracewindowminutes: t.gracewindowminutes ?? 0,
     boardcategory: t.boardcategory || '',
+    boardorder: t.boardorder ?? 100,
     isactive: t.isactive !== false
   }
   editing.value = true