replace default dialog with custom dialog

milventory/src/App.js

@@ -10,6 +10,7 @@ import AddModePreview from './components/Map/AddModePreview';
 import Login from './components/Auth/Login';
 import ErrorToast from './components/Common/ErrorToast';
 import ConflictErrorModal from './components/Common/ConflictErrorModal';
+import { BlockingDialogProvider } from './components/Common/BlockingDialogContext';
 import HistoryModal from './components/History/HistoryModal';
 import AdminDashboard from './components/Admin/AdminDashboard';
 import { auth } from './api';
@@ -55,6 +56,7 @@ function App() {
 
   return (
     <BrowserRouter>
+      <BlockingDialogProvider>
       <Routes>
         <Route
           path="/"
@@ -80,6 +82,7 @@ function App() {
         />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
+      </BlockingDialogProvider>
     </BrowserRouter>
   );
 }

milventory/src/components/Admin/CustomFieldsTable.js

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { admin } from '../../api';
+import { useBlockingDialog } from '../Common/BlockingDialogContext';
 
 const TYPES = ['text', 'number', 'date'];
 
 const CustomFieldsTable = () => {
+  const { showConfirm } = useBlockingDialog();
   const [definitions, setDefinitions] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -82,7 +84,11 @@ const CustomFieldsTable = () => {
   };
 
   const handleDelete = async (id) => {
-    if (!window.confirm('Delete this custom field definition? This will also remove this field and its value from all items that have it.')) return;
+    const ok = await showConfirm(
+      'Delete this custom field definition? This will also remove this field and its value from all items that have it.',
+      { title: 'Delete custom field', danger: true, confirmLabel: 'Delete', cancelLabel: 'Cancel' }
+    );
+    if (!ok) return;
     try {
       setError(null);
       await admin.deleteCustomFieldDefinition(id);

milventory/src/components/Admin/LocationPreview.js

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { admin } from '../../api';
+import { useBlockingDialog } from '../Common/BlockingDialogContext';
 
 const LOCATION_TYPES = [
   { value: 'drawer', label: 'Drawer' },
@@ -12,6 +13,7 @@ const LOCATION_TYPES = [
 ];
 
 const LocationPreview = ({ location, onClose, onDelete, leftPaneWidth, leftPaneCollapsed, onEditStart, onEditEnd, onPreviewUpdate, onEdgeDrag }) => {
+  const { showAlert, showConfirm } = useBlockingDialog();
   const previewRef = useRef(null);
   const [deleting, setDeleting] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -187,15 +189,17 @@ const LocationPreview = ({ location, onClose, onDelete, leftPaneWidth, leftPaneC
     if (!location) return;
 
     if (isProtected) {
-      alert(
+      await showAlert(
         `This location is protected and is a permanent inventory location. ` +
-        `To delete it, you must edit the database directly to set protected = FALSE.`
+        `To delete it, you must edit the database directly to set protected = FALSE.`,
+        { title: 'Protected location' }
       );
       return;
     }
 
-    const confirmed = window.confirm(
-      `Are you sure you want to delete "${location.name}"? This action cannot be undone.`
+    const confirmed = await showConfirm(
+      `Are you sure you want to delete "${location.name}"? This action cannot be undone.`,
+      { title: 'Delete location', danger: true, confirmLabel: 'Delete', cancelLabel: 'Cancel' }
     );
 
     if (!confirmed) return;
@@ -213,7 +217,7 @@ const LocationPreview = ({ location, onClose, onDelete, leftPaneWidth, leftPaneC
         window.location.reload();
       }, 300);
     } catch (err) {
-      alert(`Failed to delete location: ${err.message}`);
+      await showAlert(`Failed to delete location: ${err.message}`, { title: 'Error' });
       setDeleting(false);
     }
   };

milventory/src/components/Common/BlockingDialog.css

@@ -0,0 +1,39 @@
+.blocking-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  z-index: 11000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.blocking-dialog.modal {
+  max-width: 420px;
+  width: 100%;
+  margin: 0;
+}
+
+.blocking-dialog-message {
+  margin: 0;
+  color: var(--text);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.blocking-dialog .modal-actions {
+  margin-top: 1rem;
+}
+
+.modal button.blocking-dialog-confirm-danger {
+  background: #c53030;
+  color: #fff;
+}
+
+.modal button.blocking-dialog-confirm-danger:hover {
+  opacity: 0.92;
+}

milventory/src/components/Common/BlockingDialogContext.js

@@ -0,0 +1,136 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react';
+import './BlockingDialog.css';
+
+const BlockingDialogContext = createContext(null);
+
+/**
+ * App-wide blocking modal replacements for alert() / confirm().
+ * showAlert(message, { title?, confirmLabel? }) -> Promise<void>
+ * showConfirm(message, { title?, confirmLabel?, cancelLabel?, danger? }) -> Promise<boolean>
+ */
+export function BlockingDialogProvider({ children }) {
+  const [dialog, setDialog] = useState(null);
+
+  const showAlert = useCallback((message, options = {}) => {
+    const text = typeof message === 'string' ? message : String(message);
+    return new Promise((resolve) => {
+      setDialog({
+        kind: 'alert',
+        heading: options.title != null && options.title !== '' ? options.title : null,
+        message: text,
+        confirmLabel: options.confirmLabel || 'OK',
+        onConfirm: () => {
+          setDialog(null);
+          resolve();
+        },
+      });
+    });
+  }, []);
+
+  const showConfirm = useCallback((message, options = {}) => {
+    const text = typeof message === 'string' ? message : String(message);
+    return new Promise((resolve) => {
+      setDialog({
+        kind: 'confirm',
+        heading: options.title != null && options.title !== '' ? options.title : 'Confirm',
+        message: text,
+        confirmLabel: options.confirmLabel || 'OK',
+        cancelLabel: options.cancelLabel || 'Cancel',
+        danger: Boolean(options.danger),
+        onConfirm: () => {
+          setDialog(null);
+          resolve(true);
+        },
+        onCancel: () => {
+          setDialog(null);
+          resolve(false);
+        },
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!dialog) return undefined;
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        if (dialog.kind === 'confirm') dialog.onCancel();
+        else dialog.onConfirm();
+      }
+    };
+    document.addEventListener('keydown', onKey, true);
+    return () => document.removeEventListener('keydown', onKey, true);
+  }, [dialog]);
+
+  const handleOverlayMouseDown = (e) => {
+    if (e.target !== e.currentTarget) return;
+    if (dialog.kind === 'confirm') dialog.onCancel();
+    else dialog.onConfirm();
+  };
+
+  return (
+    <BlockingDialogContext.Provider value={{ showAlert, showConfirm }}>
+      {children}
+      {dialog && (
+        <div
+          className="blocking-dialog-overlay"
+          role="presentation"
+          onMouseDown={handleOverlayMouseDown}
+        >
+          <div
+            className="blocking-dialog modal"
+            role="alertdialog"
+            aria-modal="true"
+            aria-labelledby={dialog.heading ? 'blocking-dialog-heading' : undefined}
+            aria-label={!dialog.heading ? 'Notice' : undefined}
+            aria-describedby="blocking-dialog-desc"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            {dialog.heading && (
+              <h3 id="blocking-dialog-heading">{dialog.heading}</h3>
+            )}
+            <p id="blocking-dialog-desc" className="blocking-dialog-message">
+              {dialog.message}
+            </p>
+            <div className="modal-actions">
+              {dialog.kind === 'confirm' && (
+                <button
+                  type="button"
+                  className="cancel"
+                  onClick={dialog.onCancel}
+                >
+                  {dialog.cancelLabel}
+                </button>
+              )}
+              <button
+                type="button"
+                className={
+                  dialog.kind === 'confirm' && dialog.danger
+                    ? 'save blocking-dialog-confirm-danger'
+                    : 'save'
+                }
+                onClick={dialog.onConfirm}
+              >
+                {dialog.confirmLabel}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </BlockingDialogContext.Provider>
+  );
+}
+
+export function useBlockingDialog() {
+  const ctx = useContext(BlockingDialogContext);
+  if (!ctx) {
+    throw new Error('useBlockingDialog must be used within BlockingDialogProvider');
+  }
+  return ctx;
+}

milventory/src/components/History/HistoryTab.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { locationHistory } from '../../api';
 import { useInventory } from '../../context/InventoryContext';
+import { useBlockingDialog } from '../Common/BlockingDialogContext';
 
 const HistoryTab = () => {
+  const { showAlert } = useBlockingDialog();
   const [history, setHistory] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -41,7 +43,7 @@ const HistoryTab = () => {
         await reloadSupplyLocations();
       }
     } catch (err) {
-      alert(err.message || 'Failed to undo action');
+      await showAlert(err.message || 'Failed to undo action', { title: 'Undo failed' });
     } finally {
       setUndoing(prev => {
         const next = new Set(prev);

milventory/src/components/History/HistoryTableRow.js

@@ -130,15 +130,15 @@ const HistoryTableRow = ({ entry, onUndo, index = 0, isAdmin = false }) => {
 
   // Determine if entry can be undone
   // Note: Undone entries are deleted entirely from the database, so we don't need to check undone status
-  // For users: only last 5 items can be undone
+  // For users: only the first row (most recent on this page) can be undone
   // For admins: all items can be undone
   const baseCanUndo = entry.historyType === 'location' 
     ? entry.action_type !== 'CASCADED_SUBTRACT'
     : entry.can_undo !== false;
 
   const canUndo = isAdmin 
     ? baseCanUndo  // Admins can undo all items
-    : baseCanUndo && index < 5;  // Users can only undo last 5 items
+    : baseCanUndo && index < 1;  // Users can only undo the top row
 
   return (
     <tr className="history-row">

milventory/src/components/Master/MasterCreateModal.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useInventory } from '../../context/InventoryContext';
 import { getCategories, getTeams, api } from '../../api';
+import { useBlockingDialog } from '../Common/BlockingDialogContext';
 
 // Levenshtein distance for fuzzy search
 const levenshteinDistance = (str1, str2) => {
@@ -171,6 +172,7 @@ const TagDropdown = ({ placeholder, selectedItems, availableItems, onSelect, onR
 
 const MasterCreateModal = ({ isOpen, onClose }) => {
   const { createMasterItem, masterInventoryItems } = useInventory();
+  const { showAlert } = useBlockingDialog();
 
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -252,7 +254,7 @@ const MasterCreateModal = ({ isOpen, onClose }) => {
     }
   }, [isOpen]);
 
-  const handleImageChange = (e) => {
+  const handleImageChange = async (e) => {
     const file = e.target.files[0];
     if (!file) {
       setImage(null);
@@ -261,13 +263,13 @@ const MasterCreateModal = ({ isOpen, onClose }) => {
     }
 
     if (file.size > 10 * 1024 * 1024) {
-      alert('Image file size must be less than 10MB');
+      await showAlert('Image file size must be less than 10MB');
       e.target.value = '';
       return;
     }
 
     if (!file.type.startsWith('image/')) {
-      alert('Please select an image file');
+      await showAlert('Please select an image file');
       e.target.value = '';
       return;
     }
@@ -279,8 +281,9 @@ const MasterCreateModal = ({ isOpen, onClose }) => {
       setImagePreview(base64Data);
     };
     reader.onerror = () => {
-      alert('Error reading image file');
-      e.target.value = '';
+      showAlert('Error reading image file').then(() => {
+        e.target.value = '';
+      });
     };
     reader.readAsDataURL(file);
   };
@@ -290,14 +293,14 @@ const MasterCreateModal = ({ isOpen, onClose }) => {
     setImagePreview(null);
   };
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (name.trim()) {
       if (masterInventoryItems.has(name.trim())) {
-        alert('An item with this name already exists. Please use a different name.');
+        await showAlert('An item with this name already exists. Please use a different name.');
         return;
       }
       if (!areNumberCustomFieldsValid(customFields, customFieldDefinitions)) {
-        alert('Please enter a valid number in all number fields (or leave them empty).');
+        await showAlert('Please enter a valid number in all number fields (or leave them empty).');
         return;
       }