From d8fe0a48b2f1205df9ee35cc2c0519c9a2aa9888 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Wed, 5 Aug 2026 13:42:20 -0400
Subject: [PATCH] Stop a stray click outside a modal discarding what was typed

Operators reported losing a part-filled form by clicking slightly outside it.
Every data-entry modal closed on a backdrop click with no warning and no way
back - the worst possible response to a misplaced click, and it happens most to
someone adding their first records at a new site.

Close-on-overlay is removed from 35 modals across 30 files: anything containing
an input, textarea, select or v-model. They still close by Cancel or the X.

Confirmation dialogs keep it, because a delete prompt holds nothing to lose and
dismissing one by clicking away is the behaviour people expect. VendorsList
shows the distinction - its edit form no longer closes that way, its delete
confirmation still does.

The shared Modal component now defaults closeOnOverlay to FALSE. Every current
caller holds a form, a checkout, a stock adjustment or a map position being
picked, and not one passed the prop, so all of them had the same fault. A modal
that genuinely wants dismissing that way opts in explicitly.

Also regroups the operator console menu, which had grown to numbers 1-9 plus
three letters bolted on with no order to them. Actions are now grouped by what
they touch, keyed by their first letter, and the old numbers still work so
nobody who has used it for months is stopped by a rearrangement.

The menu also warns when the server is not fully provisioned and names the key
that fixes it, instead of reporting it as ordinary status lines that read as
normal unless you already knew what to look for. That check is cached for the
session because it shells out to flask twice and the answer does not change
while somebody reads the screen.
---
 deploy/windows/installer/shopdb-admin.ps1     |  71 ++++-
 .../src/components/AssetRelationships.vue     |   2 +-
 frontend/src/components/Modal.vue             | 295 +++++++++---------
 frontend/src/views/settings/ApiTokensList.vue |   4 +-
 .../src/views/settings/AssetTypesList.vue     |   2 +-
 .../src/views/settings/BusinessUnitsList.vue  |   2 +-
 .../src/views/settings/CustomFieldsList.vue   |   2 +-
 .../views/settings/DashboardDefaultsList.vue  |   2 +-
 .../src/views/settings/LocationTypesList.vue  |   2 +-
 frontend/src/views/settings/LocationsList.vue |   2 +-
 .../src/views/settings/ModelTypesList.vue     |   2 +-
 frontend/src/views/settings/ModelsList.vue    |   2 +-
 .../views/settings/RelationshipTypesList.vue  |   2 +-
 frontend/src/views/settings/StatusesList.vue  |   2 +-
 .../src/views/settings/SupportTeamsList.vue   |   4 +-
 frontend/src/views/settings/UsersList.vue     |   4 +-
 frontend/src/views/vendors/VendorsList.vue    |   2 +-
 .../frontend/views/AccessProtocolsList.vue    |   2 +-
 .../frontend/views/OperatingSystemsList.vue   |   2 +-
 .../computers/frontend/views/PCTypesList.vue  |   2 +-
 .../frontend/views/EmployeeDirectory.vue      |   4 +-
 .../frontend/views/ManifestEditor.vue         |   4 +-
 .../frontend/views/MachineTypesList.vue       |   2 +-
 .../frontend/views/MeasuringToolTypesList.vue |   2 +-
 .../frontend/views/NetworkTypesList.vue       |   2 +-
 .../network/frontend/views/SubnetsList.vue    |   2 +-
 plugins/network/frontend/views/VLANsList.vue  |   2 +-
 .../frontend/views/NotificationTypesList.vue  |   2 +-
 .../frontend/views/ModelSuppliesList.vue      |   2 +-
 .../frontend/views/PrinterDriversList.vue     |   2 +-
 .../frontend/views/PrinterTypesList.vue       |   2 +-
 .../frontend/views/WarrantiesList.vue         |   2 +-
 32 files changed, 241 insertions(+), 195 deletions(-)

diff --git a/deploy/windows/installer/shopdb-admin.ps1 b/deploy/windows/installer/shopdb-admin.ps1
index cf7673d..389a775 100644
--- a/deploy/windows/installer/shopdb-admin.ps1
+++ b/deploy/windows/installer/shopdb-admin.ps1
@@ -949,32 +949,73 @@ function Show-Uninstall {
     Say '  Take a backup first:  shopdb-admin.ps1 backup' 'Yellow'
 }
 
+# Cached for the session. Test-Provisioned shells out to flask twice, which is
+# far too slow to repeat on every redraw of the menu - and the answer does not
+# change while somebody reads the screen. Cleared after a repair so the warning
+# disappears once it is actually fixed.
+$script:Attention = $null
+
+function Show-Attention {
+    <#
+      Say what is wrong, and which key fixes it.
+
+      A server whose seeds never ran answers 500 on most pages, and until now the
+      console reported all of that as ordinary status lines that read as normal
+      unless you knew what to look for. The one thing an operator needs is the
+      next action.
+    #>
+    if ($null -eq $script:Attention) {
+        $state = Test-Provisioned
+        $script:Attention = @{
+            Provisioned = -not (($state.SchemaCurrent -eq $false) -or ($state.Seeded -eq $false))
+            Detail      = $state.Detail
+        }
+    }
+    if (-not $script:Attention.Provisioned) {
+        Write-Host ''
+        Say '  ! This server is not fully provisioned - most pages will fail.' 'Red'
+        foreach ($detail in $script:Attention.Detail) { Say ("      {0}" -f $detail) 'Red' }
+        Say '    Press F to fix it.' 'Yellow'
+    }
+}
+
 function Show-Menu {
     $first = $true
     while ($true) {
         if ($first) { Show-Banner; $first = $false }
         Show-Status
+        Show-Attention
         Write-Host ''
-        Write-Host '  1  Restart the application      6  Back up the database'  -ForegroundColor White
-        Write-Host '  2  Stop the application         7  Worker processes'      -ForegroundColor White
-        Write-Host '  3  Start the application        8  Open in browser'       -ForegroundColor White
-        Write-Host '  4  View recent logs             9  Plugins'               -ForegroundColor White
-        Write-Host '  5  Health check                 V  Verify this install'   -ForegroundColor White
-        Write-Host '  R  Repair provisioning          C  Load equipment catalog' -ForegroundColor White
-        Write-Host '                                  0  Exit'                  -ForegroundColor White
+        Write-Host '  APPLICATION          DATA                   DIAGNOSE'          -ForegroundColor DarkGray
+        Write-Host '   R  Restart           B  Back up            H  Health check'   -ForegroundColor White
+        Write-Host '   S  Stop              C  Load catalog       L  Recent logs'    -ForegroundColor White
+        Write-Host '   T  Start             P  Plugins            W  Processes'      -ForegroundColor White
+        Write-Host '   O  Open in browser   F  Repair             V  Verify install' -ForegroundColor White
+        Write-Host ''
+        Write-Host '   Q  Quit'                                                      -ForegroundColor White
         Write-Host ''
         $c = Read-Host '  Choose'
-        switch ($c) {
-            '1' { Restart-App } '2' { Stop-App }  '3' { Start-App }
-            '4' { Show-Logs }   '5' { Invoke-Check } '6' { Backup-Db $Path }
-            '7' { Show-Sessions } '8' { Open-Site }
-            'v' { Invoke-Verify } 'V' { Invoke-Verify }
-            'r' { Invoke-Repair } 'R' { Invoke-Repair }
-            'c' { Invoke-Catalog } 'C' { Invoke-Catalog }
+        # The old numbers still work. Somebody who has used this for months
+        # should not be stopped by a menu that was rearranged under them.
+        switch ($c.ToUpper()) {
+            'R' { Restart-App }    '1' { Restart-App }
+            'S' { Stop-App }       '2' { Stop-App }
+            'T' { Start-App }      '3' { Start-App }
+            'L' { Show-Logs }      '4' { Show-Logs }
+            'H' { Invoke-Check }   '5' { Invoke-Check }
+            'B' { Backup-Db $Path } '6' { Backup-Db $Path }
+            'W' { Show-Sessions }  '7' { Show-Sessions }
+            'O' { Open-Site }      '8' { Open-Site }
+            'V' { Invoke-Verify }
+            'F' { Invoke-Repair; $script:Attention = $null }
+            'C' { Invoke-Catalog }
+            'P' { Show-Plugins
+                  $add = Read-Host '  Name of a shipped plugin to add (Enter to skip)'
+                  if ($add) { Add-Plugin $add } }
             '9' { Show-Plugins
                   $add = Read-Host '  Name of a shipped plugin to add (Enter to skip)'
                   if ($add) { Add-Plugin $add } }
-            '0' { return }
+            'Q' { return }         '0' { return }
             default { Say '  not a choice' 'Yellow' }
         }
         Write-Host ''
diff --git a/frontend/src/components/AssetRelationships.vue b/frontend/src/components/AssetRelationships.vue
index 1f9bf14..5aaf4af 100644
--- a/frontend/src/components/AssetRelationships.vue
+++ b/frontend/src/components/AssetRelationships.vue
@@ -98,7 +98,7 @@
     </template>
 
     <!-- Add Relationship Modal -->
-    <div v-if="showAddModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showAddModal" class="modal-overlay">
       <div class="modal-content">
         <div class="modal-header">
           <h3>Add Relationship</h3>
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
index 090d976..c54dc1b 100644
--- a/frontend/src/components/Modal.vue
+++ b/frontend/src/components/Modal.vue
@@ -1,145 +1,150 @@
-<template>
-  <Teleport to="body">
-    <div v-if="modelValue" class="modal-overlay" @click.self="closeOnOverlay && close()">
-      <div class="modal-container" :class="sizeClass">
-        <div class="modal-header" v-if="title || $slots.header">
-          <slot name="header">
-            <h3>{{ title }}</h3>
-          </slot>
-          <button class="modal-close" @click="close" aria-label="Close">&times;</button>
-        </div>
-
-        <div class="modal-body">
-          <slot></slot>
-        </div>
-
-        <div class="modal-footer" v-if="$slots.footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, watch } from 'vue'
-
-const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-  title: { type: String, default: '' },
-  size: { type: String, default: 'medium' }, // small, medium, large, fullscreen
-  closeOnOverlay: { type: Boolean, default: true }
-})
-
-const emit = defineEmits(['update:modelValue', 'close'])
-
-const sizeClass = computed(() => `modal-${props.size}`)
-
-function close() {
-  emit('update:modelValue', false)
-  emit('close')
-}
-
-// Handle escape key
-watch(() => props.modelValue, (isOpen) => {
-  if (isOpen) {
-    document.addEventListener('keydown', handleEscape)
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.removeEventListener('keydown', handleEscape)
-    document.body.style.overflow = ''
-  }
-})
-
-function handleEscape(e) {
-  if (e.key === 'Escape') close()
-}
-</script>
-
-<style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-}
-
-.modal-container {
-  background: var(--bg-card-solid);
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  overflow: hidden;
-  color: var(--text);
-}
-
-.modal-small {
-  width: 400px;
-  max-width: 90vw;
-}
-
-.modal-medium {
-  width: 600px;
-  max-width: 90vw;
-}
-
-.modal-large {
-  width: 900px;
-  max-width: 95vw;
-}
-
-.modal-fullscreen {
-  width: 95vw;
-  height: 90vh;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--text-light);
-  padding: 0;
-  line-height: 1;
-}
-
-.modal-close:hover {
-  color: var(--text);
-}
-
-.modal-body {
-  flex: 1;
-  overflow: auto;
-  padding: 1.5rem;
-}
-
-.modal-footer {
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--border);
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
-</style>
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="modal-overlay" @click.self="closeOnOverlay && close()">
+      <div class="modal-container" :class="sizeClass">
+        <div class="modal-header" v-if="title || $slots.header">
+          <slot name="header">
+            <h3>{{ title }}</h3>
+          </slot>
+          <button class="modal-close" @click="close" aria-label="Close">&times;</button>
+        </div>
+
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <div class="modal-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  size: { type: String, default: 'medium' }, // small, medium, large, fullscreen
+  // Defaults to FALSE. Every current user of this component holds either a
+  // form, a checkout, a stock adjustment or a map position being picked, and a
+  // stray click on the backdrop threw all of it away without asking - which is
+  // what operators complained about. A modal that genuinely wants dismissing
+  // that way can still opt in with :close-on-overlay="true".
+  closeOnOverlay: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const sizeClass = computed(() => `modal-${props.size}`)
+
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+// Handle escape key
+watch(() => props.modelValue, (isOpen) => {
+  if (isOpen) {
+    document.addEventListener('keydown', handleEscape)
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.removeEventListener('keydown', handleEscape)
+    document.body.style.overflow = ''
+  }
+})
+
+function handleEscape(e) {
+  if (e.key === 'Escape') close()
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-container {
+  background: var(--bg-card-solid);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+  color: var(--text);
+}
+
+.modal-small {
+  width: 400px;
+  max-width: 90vw;
+}
+
+.modal-medium {
+  width: 600px;
+  max-width: 90vw;
+}
+
+.modal-large {
+  width: 900px;
+  max-width: 95vw;
+}
+
+.modal-fullscreen {
+  width: 95vw;
+  height: 90vh;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-light);
+  padding: 0;
+  line-height: 1;
+}
+
+.modal-close:hover {
+  color: var(--text);
+}
+
+.modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+</style>
diff --git a/frontend/src/views/settings/ApiTokensList.vue b/frontend/src/views/settings/ApiTokensList.vue
index ea34cbd..8860b9c 100644
--- a/frontend/src/views/settings/ApiTokensList.vue
+++ b/frontend/src/views/settings/ApiTokensList.vue
@@ -109,7 +109,7 @@
     </div>
 
     <!-- Create modal -->
-    <div v-if="showCreate" class="modal-overlay" @click.self="closeCreate">
+    <div v-if="showCreate" class="modal-overlay">
       <div class="modal modal-lg">
         <div class="modal-header"><h3>New API Token</h3></div>
         <form @submit.prevent="createToken">
@@ -174,7 +174,7 @@
     </div>
 
     <!-- Edit modal (scopes) -->
-    <div v-if="editing" class="modal-overlay" @click.self="closeEdit">
+    <div v-if="editing" class="modal-overlay">
       <div class="modal modal-lg">
         <div class="modal-header"><h3>Edit token access</h3></div>
         <form @submit.prevent="saveEdit">
diff --git a/frontend/src/views/settings/AssetTypesList.vue b/frontend/src/views/settings/AssetTypesList.vue
index 6067799..3f7dd54 100644
--- a/frontend/src/views/settings/AssetTypesList.vue
+++ b/frontend/src/views/settings/AssetTypesList.vue
@@ -38,7 +38,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>Edit {{ form.assettype }}</h3></div>
         <form @submit.prevent="save">
diff --git a/frontend/src/views/settings/BusinessUnitsList.vue b/frontend/src/views/settings/BusinessUnitsList.vue
index f4efed7..09cfe5f 100644
--- a/frontend/src/views/settings/BusinessUnitsList.vue
+++ b/frontend/src/views/settings/BusinessUnitsList.vue
@@ -50,7 +50,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editing ? 'Edit Business Unit' : 'Add Business Unit' }}</h3>
diff --git a/frontend/src/views/settings/CustomFieldsList.vue b/frontend/src/views/settings/CustomFieldsList.vue
index 8bb6223..5e6c803 100644
--- a/frontend/src/views/settings/CustomFieldsList.vue
+++ b/frontend/src/views/settings/CustomFieldsList.vue
@@ -67,7 +67,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Field</h3></div>
         <form @submit.prevent="save">
diff --git a/frontend/src/views/settings/DashboardDefaultsList.vue b/frontend/src/views/settings/DashboardDefaultsList.vue
index 48a4a9e..c63fd86 100644
--- a/frontend/src/views/settings/DashboardDefaultsList.vue
+++ b/frontend/src/views/settings/DashboardDefaultsList.vue
@@ -49,7 +49,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editing ? 'Edit Mapping' : 'Add Mapping' }}</h3>
diff --git a/frontend/src/views/settings/LocationTypesList.vue b/frontend/src/views/settings/LocationTypesList.vue
index c71115b..8a008a8 100644
--- a/frontend/src/views/settings/LocationTypesList.vue
+++ b/frontend/src/views/settings/LocationTypesList.vue
@@ -39,7 +39,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Location Type</h3></div>
         <form @submit.prevent="save">
diff --git a/frontend/src/views/settings/LocationsList.vue b/frontend/src/views/settings/LocationsList.vue
index 6cb4f43..2276fb9 100644
--- a/frontend/src/views/settings/LocationsList.vue
+++ b/frontend/src/views/settings/LocationsList.vue
@@ -77,7 +77,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingLocation ? 'Edit Location' : 'Add Location' }}</h3>
diff --git a/frontend/src/views/settings/ModelTypesList.vue b/frontend/src/views/settings/ModelTypesList.vue
index 80b65d9..dc8d979 100644
--- a/frontend/src/views/settings/ModelTypesList.vue
+++ b/frontend/src/views/settings/ModelTypesList.vue
@@ -64,7 +64,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingType ? 'Edit Model Type' : 'Add Model Type' }}</h3>
diff --git a/frontend/src/views/settings/ModelsList.vue b/frontend/src/views/settings/ModelsList.vue
index fd1f1a0..a8f2f17 100644
--- a/frontend/src/views/settings/ModelsList.vue
+++ b/frontend/src/views/settings/ModelsList.vue
@@ -77,7 +77,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal modal-lg">
         <div class="modal-header">
           <h3>{{ editingModel ? 'Edit Model' : 'Add Model' }}</h3>
diff --git a/frontend/src/views/settings/RelationshipTypesList.vue b/frontend/src/views/settings/RelationshipTypesList.vue
index 9ed6ef6..ec5a9cd 100644
--- a/frontend/src/views/settings/RelationshipTypesList.vue
+++ b/frontend/src/views/settings/RelationshipTypesList.vue
@@ -41,7 +41,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Relationship Type</h3></div>
         <form @submit.prevent="save">
diff --git a/frontend/src/views/settings/StatusesList.vue b/frontend/src/views/settings/StatusesList.vue
index 1eb6143..037cc6b 100644
--- a/frontend/src/views/settings/StatusesList.vue
+++ b/frontend/src/views/settings/StatusesList.vue
@@ -67,7 +67,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingStatus ? 'Edit Status' : 'Add Status' }}</h3>
diff --git a/frontend/src/views/settings/SupportTeamsList.vue b/frontend/src/views/settings/SupportTeamsList.vue
index 006543e..f66d46c 100644
--- a/frontend/src/views/settings/SupportTeamsList.vue
+++ b/frontend/src/views/settings/SupportTeamsList.vue
@@ -48,7 +48,7 @@
     </div>
 
     <!-- Team Add/Edit Modal -->
-    <div v-if="showTeamModal" class="modal-overlay" @click.self="showTeamModal = false">
+    <div v-if="showTeamModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingTeam ? 'Edit Support Team' : 'Add Support Team' }}</h3>
@@ -130,7 +130,7 @@
     </div>
 
     <!-- Contact Add/Edit Modal -->
-    <div v-if="showContactModal" class="modal-overlay" @click.self="showContactModal = false">
+    <div v-if="showContactModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingContact ? 'Edit Contact' : 'Add Contact' }}</h3>
diff --git a/frontend/src/views/settings/UsersList.vue b/frontend/src/views/settings/UsersList.vue
index 66fb6f0..06fa15a 100644
--- a/frontend/src/views/settings/UsersList.vue
+++ b/frontend/src/views/settings/UsersList.vue
@@ -112,7 +112,7 @@
   </div>
 
   <!-- User Modal -->
-  <div v-if="showCreateModal || editingUser" class="modal-overlay" @click.self="closeUserModal">
+  <div v-if="showCreateModal || editingUser" class="modal-overlay">
     <div class="modal">
       <div class="modal-header">
         <h3>{{ editingUser ? 'Edit User' : 'Create User' }}</h3>
@@ -190,7 +190,7 @@
   </div>
 
   <!-- Role Modal -->
-  <div v-if="showRoleModal || editingRole" class="modal-overlay" @click.self="closeRoleModal">
+  <div v-if="showRoleModal || editingRole" class="modal-overlay">
     <div class="modal modal-lg">
       <div class="modal-header">
         <h3>{{ editingRole ? 'Edit Role' : 'Create Role' }}</h3>
diff --git a/frontend/src/views/vendors/VendorsList.vue b/frontend/src/views/vendors/VendorsList.vue
index 6238a6d..734d551 100644
--- a/frontend/src/views/vendors/VendorsList.vue
+++ b/frontend/src/views/vendors/VendorsList.vue
@@ -73,7 +73,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingVendor ? 'Edit Vendor' : 'Add Vendor' }}</h3>
diff --git a/plugins/computers/frontend/views/AccessProtocolsList.vue b/plugins/computers/frontend/views/AccessProtocolsList.vue
index 045320f..1682de5 100644
--- a/plugins/computers/frontend/views/AccessProtocolsList.vue
+++ b/plugins/computers/frontend/views/AccessProtocolsList.vue
@@ -51,7 +51,7 @@
       </div>
     </div>
 
-    <div v-if="editing" class="modal-overlay" @click.self="close">
+    <div v-if="editing" class="modal-overlay">
       <div class="modal-panel">
         <h2>{{ form.protocolid ? 'Edit' : 'New' }} Protocol</h2>
         <div class="form-grid">
diff --git a/plugins/computers/frontend/views/OperatingSystemsList.vue b/plugins/computers/frontend/views/OperatingSystemsList.vue
index 920c5fd..62d630d 100644
--- a/plugins/computers/frontend/views/OperatingSystemsList.vue
+++ b/plugins/computers/frontend/views/OperatingSystemsList.vue
@@ -57,7 +57,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editing ? 'Edit Operating System' : 'Add Operating System' }}</h3>
diff --git a/plugins/computers/frontend/views/PCTypesList.vue b/plugins/computers/frontend/views/PCTypesList.vue
index 00758dd..453a011 100644
--- a/plugins/computers/frontend/views/PCTypesList.vue
+++ b/plugins/computers/frontend/views/PCTypesList.vue
@@ -45,7 +45,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editing ? 'Edit PC Type' : 'Add PC Type' }}</h3>
diff --git a/plugins/employees/frontend/views/EmployeeDirectory.vue b/plugins/employees/frontend/views/EmployeeDirectory.vue
index 3d4c0db..0b772e4 100644
--- a/plugins/employees/frontend/views/EmployeeDirectory.vue
+++ b/plugins/employees/frontend/views/EmployeeDirectory.vue
@@ -59,7 +59,7 @@
     </div>
 
     <!-- Add / edit modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Person</h3></div>
         <form @submit.prevent="save">
@@ -115,7 +115,7 @@
     </div>
 
     <!-- CSV import modal -->
-    <div v-if="showImport" class="modal-overlay" @click.self="showImport = false">
+    <div v-if="showImport" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>Import CSV</h3></div>
         <div class="modal-body">
diff --git a/plugins/geenforce/frontend/views/ManifestEditor.vue b/plugins/geenforce/frontend/views/ManifestEditor.vue
index 71d0ee8..3a44225 100644
--- a/plugins/geenforce/frontend/views/ManifestEditor.vue
+++ b/plugins/geenforce/frontend/views/ManifestEditor.vue
@@ -268,7 +268,7 @@
     </div>
 
     <!-- New scope modal -->
-    <div v-if="showNewScope" class="modal-overlay" @click.self="showNewScope = false">
+    <div v-if="showNewScope" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>New imaging PC type</h3>
@@ -299,7 +299,7 @@
     </div>
 
     <!-- Entry modal -->
-    <div v-if="showEntry" class="modal-overlay" @click.self="showEntry = false">
+    <div v-if="showEntry" class="modal-overlay">
       <div class="modal modal-entry">
         <div class="modal-header">
           <h3>{{ entryForm.entryid ? 'Edit entry' : 'New entry' }}</h3>
diff --git a/plugins/machines/frontend/views/MachineTypesList.vue b/plugins/machines/frontend/views/MachineTypesList.vue
index 30588b5..bc69909 100644
--- a/plugins/machines/frontend/views/MachineTypesList.vue
+++ b/plugins/machines/frontend/views/MachineTypesList.vue
@@ -39,7 +39,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Machine Type</h3></div>
         <form @submit.prevent="save">
diff --git a/plugins/measuringtools/frontend/views/MeasuringToolTypesList.vue b/plugins/measuringtools/frontend/views/MeasuringToolTypesList.vue
index 1ac417f..b16919c 100644
--- a/plugins/measuringtools/frontend/views/MeasuringToolTypesList.vue
+++ b/plugins/measuringtools/frontend/views/MeasuringToolTypesList.vue
@@ -45,7 +45,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editing ? 'Edit Type' : 'Add Type' }}</h3>
diff --git a/plugins/network/frontend/views/NetworkTypesList.vue b/plugins/network/frontend/views/NetworkTypesList.vue
index c779d74..344a3f7 100644
--- a/plugins/network/frontend/views/NetworkTypesList.vue
+++ b/plugins/network/frontend/views/NetworkTypesList.vue
@@ -39,7 +39,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Network Device Type</h3></div>
         <form @submit.prevent="save">
diff --git a/plugins/network/frontend/views/SubnetsList.vue b/plugins/network/frontend/views/SubnetsList.vue
index 5a49d06..5dd2967 100644
--- a/plugins/network/frontend/views/SubnetsList.vue
+++ b/plugins/network/frontend/views/SubnetsList.vue
@@ -97,7 +97,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal modal-lg">
         <div class="modal-header">
           <h3>{{ editingSubnet ? 'Edit Subnet' : 'Add Subnet' }}</h3>
diff --git a/plugins/network/frontend/views/VLANsList.vue b/plugins/network/frontend/views/VLANsList.vue
index e55f1d5..27b44da 100644
--- a/plugins/network/frontend/views/VLANsList.vue
+++ b/plugins/network/frontend/views/VLANsList.vue
@@ -95,7 +95,7 @@
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header">
           <h3>{{ editingVLAN ? 'Edit VLAN' : 'Add VLAN' }}</h3>
diff --git a/plugins/notifications/frontend/views/NotificationTypesList.vue b/plugins/notifications/frontend/views/NotificationTypesList.vue
index 4353cf3..6642158 100644
--- a/plugins/notifications/frontend/views/NotificationTypesList.vue
+++ b/plugins/notifications/frontend/views/NotificationTypesList.vue
@@ -57,7 +57,7 @@
     </div>
 
     <!-- Editor -->
-    <div v-if="editing" class="modal-overlay" @click.self="close">
+    <div v-if="editing" class="modal-overlay">
       <div class="modal-panel">
         <h2>{{ form.notificationtypeid ? 'Edit' : 'New' }} Notification Type</h2>
 
diff --git a/plugins/printers/frontend/views/ModelSuppliesList.vue b/plugins/printers/frontend/views/ModelSuppliesList.vue
index 15978f1..2db64b9 100644
--- a/plugins/printers/frontend/views/ModelSuppliesList.vue
+++ b/plugins/printers/frontend/views/ModelSuppliesList.vue
@@ -92,7 +92,7 @@
     </div>
 
     <!-- add / edit modal -->
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <h3>{{ editing ? 'Edit Supply' : 'Add Supply' }}</h3>
         <div class="form-grid">
diff --git a/plugins/printers/frontend/views/PrinterDriversList.vue b/plugins/printers/frontend/views/PrinterDriversList.vue
index 56282da..6435563 100644
--- a/plugins/printers/frontend/views/PrinterDriversList.vue
+++ b/plugins/printers/frontend/views/PrinterDriversList.vue
@@ -52,7 +52,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Driver</h3></div>
         <form @submit.prevent="save">
diff --git a/plugins/printers/frontend/views/PrinterTypesList.vue b/plugins/printers/frontend/views/PrinterTypesList.vue
index 5789891..40c4241 100644
--- a/plugins/printers/frontend/views/PrinterTypesList.vue
+++ b/plugins/printers/frontend/views/PrinterTypesList.vue
@@ -39,7 +39,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Printer Type</h3></div>
         <form @submit.prevent="save">
diff --git a/plugins/warranty/frontend/views/WarrantiesList.vue b/plugins/warranty/frontend/views/WarrantiesList.vue
index 6449772..9e549f9 100644
--- a/plugins/warranty/frontend/views/WarrantiesList.vue
+++ b/plugins/warranty/frontend/views/WarrantiesList.vue
@@ -74,7 +74,7 @@
       </template>
     </div>
 
-    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+    <div v-if="showModal" class="modal-overlay">
       <div class="modal">
         <div class="modal-header"><h3>{{ editing ? 'Edit' : 'Add' }} Warranty</h3></div>
         <form @submit.prevent="save">