@striae-org/striae 4.0.3 → 4.1.0

package/app/components/sidebar/files/files-modal.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useState, useContext, useEffect } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { deleteFile } from '~/components/actions/image-manage';
 import { getFileAnnotations } from '~/utils/data';
 import { type FileData } from '~/types';
@@ -33,6 +34,13 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   const [currentPage, setCurrentPage] = useState(0);
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<FileConfirmationStatus>({});
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   const totalPages = Math.ceil(files.length / FILES_PER_PAGE);
   const startIndex = currentPage * FILES_PER_PAGE;
@@ -88,21 +96,6 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
     fetchConfirmationStatuses();
   }, [isOpen, currentCase, currentPage, files, user]);
 
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-  }, [isOpen, onClose]);
-
   const handleFileSelect = (file: FileData) => {
     onFileSelect?.(file);
     onClose();
@@ -166,7 +159,14 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   if (!isOpen) return null;
 
   return (
-    <div className={styles.modalOverlay}>
+    <div
+      className={styles.modalOverlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close files dialog"
+    >
       <div className={styles.modal}>
         <div className={styles.modalHeader}>
           <h2>Files in Case {currentCase}</h2>

package/app/components/sidebar/notes/notes-modal.tsx

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './notes.module.css';
 
 interface NotesModalProps {
@@ -10,19 +11,13 @@ interface NotesModalProps {
 
 export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps) => {
   const [tempNotes, setTempNotes] = useState(notes);
-
-  useEffect(() => {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-  
-      if (isOpen) {
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-      }
-    }, [isOpen, onClose]);
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   if (!isOpen) return null;  
 
@@ -32,7 +27,14 @@ export const NotesModal = ({ isOpen, onClose, notes, onSave }: NotesModalProps)
   };
 
   return (
-    <div className={styles.modalOverlay}>
+    <div
+      className={styles.modalOverlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close notes dialog"
+    >
       <div className={styles.modal}>
         <h5 className={styles.modalTitle}>Additional Notes</h5>
         <textarea

package/app/components/sidebar/notes/notes.module.css

@@ -262,6 +262,7 @@ textarea:focus {
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .modal {
@@ -271,6 +272,7 @@ textarea:focus {
   width: 90%;
   max-width: 500px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  cursor: default;
 }
 
 .modalTitle {

package/app/components/sidebar/sidebar.module.css

@@ -120,6 +120,7 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  cursor: default;
 }
 
 .footerModal {
@@ -131,6 +132,7 @@
   max-height: 80vh;
   overflow-y: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  cursor: default;
 }
 
 .footerModalHeader {
@@ -237,8 +239,6 @@
   text-underline-offset: 3px;
 }
 
-
-
 /* Import Section */
 .importSection {
   margin-top: auto;

package/app/components/toast/toast.module.css

@@ -6,7 +6,7 @@
   bottom: 0;
   background: color-mix(in lab, var(--black) 40%, transparent);
   z-index: 999;
-  cursor: pointer;
+  cursor: default;
 }
 
 .toast {
@@ -28,6 +28,7 @@
   max-width: 400px;
   min-width: 300px;
   backdrop-filter: blur(10px);
+  cursor: default;
 }
 
 .toast.show {

package/app/components/toast/toast.tsx

@@ -1,4 +1,5 @@
 import { useEffect, type ReactNode } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import styles from './toast.module.css';
 
 interface ToastProps {
@@ -10,30 +11,34 @@ interface ToastProps {
 }
 
 export const Toast = ({ message, type, isVisible, onClose, duration = 4000 }: ToastProps) => {
+  const {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen: isVisible,
+    onClose,
+    closeOnEscape: false
+  });
+
   useEffect(() => {
     if (isVisible && duration > 0) {
       const timer = setTimeout(() => {
-        onClose();
+        requestClose();
       }, duration);
 
       return () => clearTimeout(timer);
     }
-  }, [isVisible, onClose, duration]);
+  }, [isVisible, requestClose, duration]);
 
   if (!isVisible) return null;
 
-  const handleBackdropKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      onClose();
-    }
-  };
-
   return (
     <>
       <div 
         className={styles.backdrop} 
-        onClick={onClose}
-        onKeyDown={handleBackdropKeyDown}
+        onMouseDown={handleOverlayMouseDown}
+        onKeyDown={handleOverlayKeyDown}
         role="button"
         tabIndex={0}
         aria-label="Close notification"
@@ -45,7 +50,7 @@ export const Toast = ({ message, type, isVisible, onClose, duration = 4000 }: To
         <span className={styles.message}>{message}</span>
         <button 
           className={styles.closeButton}
-          onClick={onClose}
+          onClick={requestClose}
           aria-label="Close notification"
         >
           ×

package/app/components/user/delete-account.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { fetchUserApi } from '~/utils/api';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { auditService } from '~/services/audit';
 import styles from './delete-account.module.css';
 
@@ -37,6 +38,13 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
   const [deletionProgress, setDeletionProgress] = useState<DeletionProgress>(initialDeletionProgress);
+  const {
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   // Extract first and last name from display name
   const [firstName, lastName] = (user.displayName || '').split(' ');
@@ -170,26 +178,14 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
   };
 
   useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      // Reset form when modal opens
       setUidConfirmation('');
       setEmailConfirmation('');
       setError('');
       setSuccess(false);
       setDeletionProgress(initialDeletionProgress);
     }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose]);
+  }, [isOpen]);
 
   const handleDeleteAccount = async () => {
     if (!isConfirmationValid) return;
@@ -317,27 +313,10 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
           ? `Deleting case ${deletionProgress.currentCaseNumber}...`
           : 'Preparing account deletion...');
 
-  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onClose();
-    }
-  };
-
   return (
     <div 
       className={styles.modalOverlay} 
-      onClick={handleOverlayClick}
+      onMouseDown={handleOverlayMouseDown}
       onKeyDown={handleOverlayKeyDown}
       role="button"
       tabIndex={0}

package/app/components/user/inactivity-warning.module.css

@@ -10,6 +10,7 @@
   align-items: center;
   z-index: 9999;
   backdrop-filter: blur(2px);
+  cursor: default;
 }
 
 .modal {
@@ -21,6 +22,7 @@
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
   border: 1px solid #e0e0e0;
   animation: slideIn 0.3s ease-out;
+  cursor: default;
 }
 
 @keyframes slideIn {
@@ -62,7 +64,7 @@
   font-size: 2rem;
   font-weight: bold;
   color: #dc3545;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   background: rgba(220, 53, 69, 0.1);
   padding: 1rem;
   border-radius: 8px;
@@ -118,25 +120,25 @@
   .overlay {
     background-color: rgba(0, 0, 0, 0.9);
   }
-  
+
   .modal {
     background: #2d2d2d;
     border-color: #404040;
   }
-  
+
   .header h3 {
     color: #ffffff;
   }
-  
+
   .content p {
     color: #cccccc;
   }
-  
+
   .signOutButton {
     color: #adb5bd;
     border-color: #6c757d;
   }
-  
+
   .signOutButton:hover {
     background: #404040;
     color: #ffffff;

package/app/components/user/manage-profile.module.css

@@ -7,6 +7,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -22,6 +23,7 @@
   flex-direction: column;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   overflow: hidden;
+  cursor: default;
 }
 
 /* Modal Header */

package/app/components/user/manage-profile.tsx

@@ -4,6 +4,7 @@ import { PasswordReset } from '~/routes/auth/passwordReset';
 import { DeleteAccount } from './delete-account';
 import { UserAuditViewer } from '../audit/user-audit-viewer';
 import { AuthContext } from '~/contexts/auth.context';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { getUserData, updateUserData } from '~/utils/data';
 import { auditService } from '~/services/audit';
 import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
@@ -19,6 +20,8 @@ interface ManageProfileProps {
 export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const { user } = useContext(AuthContext);
   const [displayName, setDisplayName] = useState(user?.displayName || '');
+  const [badgeId, setBadgeId] = useState('');
+  const [initialBadgeId, setInitialBadgeId] = useState('');
   const [company, setCompany] = useState('');
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);
@@ -29,19 +32,20 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showAuditViewer, setShowAuditViewer] = useState(false);
   const isCloseBlocked = isMfaBusy || isLoading;
+  const {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isCloseBlocked
+  });
 
   const handleMfaBusyChange = useCallback((isBusy: boolean) => {
     setIsMfaBusy(isBusy);
   }, []);
 
-  const handleCloseRequest = () => {
-    if (isCloseBlocked) {
-      return;
-    }
-
-    onClose();
-  };
-
   useEffect(() => {
     if (isOpen && user) {
       const loadUserData = async () => {
@@ -51,6 +55,18 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
           if (userData) {
             setCompany(userData.company || '');
             setEmail(userData.email || '');
+            const storedBadgeId = userData.badgeId || '';
+            setBadgeId(storedBadgeId);
+            setInitialBadgeId(storedBadgeId);
+
+            if (userData.badgeId === undefined) {
+              try {
+                await updateUserData(user, { badgeId: '' });
+                setInitialBadgeId('');
+              } catch (badgeInitError) {
+                console.error('Failed to initialize badge ID field:', badgeInitError);
+              }
+            }
           }
         } catch (err) {
           console.error('Failed to load user data:', err);
@@ -61,22 +77,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
     }
   }, [isOpen, user]);
 
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen && !isCloseBlocked) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, isCloseBlocked, onClose]);
-
   const handleUpdateProfile = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
@@ -84,6 +84,8 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
     setSuccess('');
 
     const oldDisplayName = user?.displayName || '';
+    const oldBadgeId = initialBadgeId;
+    const normalizedBadgeId = badgeId.trim();
 
     try {
       if (!user) throw new Error(ERROR_MESSAGES.NO_USER);
@@ -98,6 +100,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         email: user.email,
         firstName: firstName || '',
         lastName: lastName || '',
+        badgeId: normalizedBadgeId,
       });
 
       await auditService.logUserProfileUpdate(
@@ -105,9 +108,27 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         'displayName',
         oldDisplayName,
         displayName,
-        'success'
+        'success',
+        undefined,
+        [],
+        normalizedBadgeId
       );
 
+      if (oldBadgeId !== normalizedBadgeId) {
+        await auditService.logUserProfileUpdate(
+          user,
+          'badgeId',
+          oldBadgeId,
+          normalizedBadgeId,
+          'success',
+          undefined,
+          [],
+          normalizedBadgeId
+        );
+      }
+
+      setInitialBadgeId(normalizedBadgeId);
+
       setSuccess(ERROR_MESSAGES.PROFILE_UPDATED);
     } catch (err) {
       const { message } = handleAuthError(err);
@@ -119,9 +140,23 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
         displayName,
         'failure',
         undefined,
-        [message]
+        [message],
+        normalizedBadgeId
       );
 
+      if (oldBadgeId !== normalizedBadgeId) {
+        await auditService.logUserProfileUpdate(
+          user!,
+          'badgeId',
+          oldBadgeId,
+          normalizedBadgeId,
+          'failure',
+          undefined,
+          [message],
+          normalizedBadgeId
+        );
+      }
+
       setError(message);
     } finally {
       setIsLoading(false);
@@ -158,19 +193,24 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   }
 
   return (
-    <div className={styles.modalOverlay} onClick={handleCloseRequest} role="presentation">
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
+    <div
+      className={styles.modalOverlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close manage profile dialog"
+    >
       <div
         className={styles.modal}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
-        onClick={(e) => e.stopPropagation()}
       >
         <header className={styles.modalHeader}>
           <h1 id="modal-title">Manage Profile</h1>
           <button
-            onClick={handleCloseRequest}
+            onClick={requestClose}
             className={styles.closeButton}
             aria-label="Close modal"
             disabled={isCloseBlocked}
@@ -192,6 +232,21 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
             required
           />
 
+          <div className={styles.formGroup}>
+            <label htmlFor="badgeId">Badge/ID #</label>
+            <input
+              id="badgeId"
+              type="text"
+              value={badgeId}
+              onChange={(e) => setBadgeId(e.target.value)}
+              className={styles.input}
+              autoComplete="off"
+            />
+            <p className={styles.helpText}>
+              Enter your Badge/ID number for confirmations and reports. This can be updated as needed.
+            </p>
+          </div>
+
           <div className={styles.formGroup}>
             <label htmlFor="company">Lab/Company Name</label>
             <input

package/app/hooks/useOverlayDismiss.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+
+interface UseOverlayDismissOptions {
+  isOpen: boolean;
+  onClose: () => void;
+  canDismiss?: boolean;
+  closeOnEscape?: boolean;
+  closeOnBackdrop?: boolean;
+}
+
+export const useOverlayDismiss = ({
+  isOpen,
+  onClose,
+  canDismiss = true,
+  closeOnEscape = true,
+  closeOnBackdrop = true
+}: UseOverlayDismissOptions) => {
+  const requestClose = useCallback(() => {
+    if (!canDismiss) {
+      return;
+    }
+
+    onClose();
+  }, [canDismiss, onClose]);
+
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape || !canDismiss) {
+      return;
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, closeOnEscape, canDismiss, onClose]);
+
+  const handleOverlayMouseDown = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {
+    if (!closeOnBackdrop || event.target !== event.currentTarget) {
+      return;
+    }
+
+    requestClose();
+  }, [closeOnBackdrop, requestClose]);
+
+  const handleOverlayKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>((event) => {
+    if (!closeOnBackdrop || event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      requestClose();
+    }
+  }, [closeOnBackdrop, requestClose]);
+
+  return {
+    requestClose,
+    handleOverlayMouseDown,
+    handleOverlayKeyDown
+  };
+};