@striae-org/striae 5.5.0 → 5.5.1

package/app/components/actions/export-audit-pdf.ts

@@ -287,9 +287,7 @@ export const exportAuditPDF = async ({
     const exportRangeStartIso = isBundledArchivedCase
       ? normalizeIsoDate(sortedEntries[0]?.timestamp) || caseCreatedAtIso
       : caseCreatedAtIso;
-    const exportRangeEndIso = isBundledArchivedCase
-      ? normalizeIsoDate(sortedEntries[sortedEntries.length - 1]?.timestamp) || nowIso
-      : nowIso;
+    const exportRangeEndIso = normalizeIsoDate(sortedEntries[sortedEntries.length - 1]?.timestamp) || nowIso;
 
     const chunks = chunkEntries(sortedEntries);
     const totalChunks = chunks.length;
@@ -313,6 +311,7 @@ export const exportAuditPDF = async ({
         userFirstName,
         userLastName,
         userBadgeId,
+        userTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         auditTrailReport: buildAuditTrailPayload(
           caseNumber,
           chunkEntriesForPart,

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

@@ -118,10 +118,10 @@ const ClassDetailsModalContent = ({
             />
           )}
         </div>
-        <div className={styles.modalButtons}>
+        <div className={`${styles.modalButtons} ${styles.classDetailsModalButtons}`}>
           <button
             onClick={handleSave}
-            className={styles.saveButton}
+            className={`${styles.saveButton} ${styles.classDetailsModalAction}`}
             disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
@@ -129,7 +129,7 @@ const ClassDetailsModalContent = ({
           </button>
           <button
             onClick={requestClose}
-            className={styles.cancelButton}
+            className={`${styles.cancelButton} ${styles.classDetailsModalAction}`}
             disabled={isSaving}
           >
             Cancel

package/app/components/sidebar/notes/notes-editor-form.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
 import { AddlNotesModal } from './addl-notes-modal';
@@ -18,13 +18,71 @@ interface NotesEditorFormProps {
   originalFileName?: string;
   isUploading?: boolean;
   showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
+  onDirtyChange?: (isDirty: boolean) => void;
+  onRegisterSaveHandler?: (saveHandler: (() => Promise<boolean>) | null) => void;
 }
 
 type SupportLevel = 'ID' | 'Exclusion' | 'Inconclusive';
 type ClassType = 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
 type IndexType = 'number' | 'color';
 
-export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification }: NotesEditorFormProps) => {
+interface NotesFormSnapshot {
+  leftCase: string;
+  rightCase: string;
+  leftItem: string;
+  rightItem: string;
+  caseFontColor: string;
+  classType: ClassType | '';
+  customClass: string;
+  classNote: string;
+  hasSubclass: boolean;
+  bulletData: BulletAnnotationData | undefined;
+  cartridgeCaseData: CartridgeCaseAnnotationData | undefined;
+  shotshellData: ShotshellAnnotationData | undefined;
+  indexType: IndexType;
+  indexNumber: string;
+  indexColor: string;
+  supportLevel: SupportLevel | '';
+  includeConfirmation: boolean;
+  additionalNotes: string;
+}
+
+const hasMeaningfulValue = (value: unknown): boolean => {
+  if (value === undefined || value === null) {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.some(hasMeaningfulValue);
+  }
+
+  if (typeof value === 'object') {
+    return Object.values(value as Record<string, unknown>).some(hasMeaningfulValue);
+  }
+
+  return true;
+};
+
+const normalizeNestedAnnotationData = <T extends object>(data: T | undefined): T | undefined => {
+  if (data === undefined || data === null) {
+    return undefined;
+  }
+
+  return hasMeaningfulValue(data) ? data : undefined;
+};
+
+const normalizeNotesSnapshot = (snapshot: NotesFormSnapshot): NotesFormSnapshot => ({
+  ...snapshot,
+  bulletData: normalizeNestedAnnotationData(snapshot.bulletData),
+  cartridgeCaseData: normalizeNestedAnnotationData(snapshot.cartridgeCaseData),
+  shotshellData: normalizeNestedAnnotationData(snapshot.shotshellData),
+});
+
+const serializeNotesSnapshot = (snapshot: NotesFormSnapshot): string => JSON.stringify(normalizeNotesSnapshot(snapshot));
+const DIRTY_CHECK_DEBOUNCE_MS = 180;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefresh, originalFileName, isUploading = false, showNotification: externalShowNotification, onDirtyChange, onRegisterSaveHandler }: NotesEditorFormProps) => {
   // Loading/Saving Notes States
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string>();
@@ -64,13 +122,72 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
   const [isClassOpen, setIsClassOpen] = useState(true);
   const [isIndexOpen, setIsIndexOpen] = useState(true);
   const [isSupportOpen, setIsSupportOpen] = useState(true);
+  const [savedSnapshot, setSavedSnapshot] = useState<string>('');
+  const [hasLoadedSnapshot, setHasLoadedSnapshot] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
   const areInputsDisabled = isUploading || isConfirmedImage;
 
-  const notificationHandler = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
+  const notificationHandler = useCallback((message: string, type: 'success' | 'error' | 'warning' = 'success') => {
     if (externalShowNotification) {
       externalShowNotification(message, type);
     }
-  };
+  }, [externalShowNotification]);
+
+  useEffect(() => {
+    if (!hasLoadedSnapshot) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      const nextSnapshot = serializeNotesSnapshot({
+        leftCase,
+        rightCase,
+        leftItem,
+        rightItem,
+        caseFontColor,
+        classType,
+        customClass,
+        classNote,
+        hasSubclass,
+        bulletData,
+        cartridgeCaseData,
+        shotshellData,
+        indexType,
+        indexNumber,
+        indexColor,
+        supportLevel,
+        includeConfirmation,
+        additionalNotes,
+      });
+
+      setIsDirty(nextSnapshot !== savedSnapshot);
+    }, DIRTY_CHECK_DEBOUNCE_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    additionalNotes,
+    bulletData,
+    cartridgeCaseData,
+    caseFontColor,
+    classNote,
+    classType,
+    customClass,
+    hasLoadedSnapshot,
+    hasSubclass,
+    includeConfirmation,
+    indexColor,
+    indexNumber,
+    indexType,
+    leftCase,
+    leftItem,
+    rightCase,
+    rightItem,
+    savedSnapshot,
+    shotshellData,
+    supportLevel,
+  ]);
 
   useEffect(() => {
     const loadExistingNotes = async () => {
@@ -79,6 +196,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       setIsLoading(true);
       setLoadError(undefined);
       setIsConfirmedImage(false);
+      setHasLoadedSnapshot(false);
+      setIsDirty(false);
+      onDirtyChange?.(false);
       
       try {
         const existingNotes = await getNotes(user, currentCase, imageId);
@@ -106,19 +226,66 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
           setSupportLevel(existingNotes.supportLevel || '');
           setIncludeConfirmation(existingNotes.includeConfirmation);
           setAdditionalNotes(existingNotes.additionalNotes || '');
+
+          setSavedSnapshot(serializeNotesSnapshot({
+            leftCase: existingNotes.leftCase || '',
+            rightCase: existingNotes.rightCase || '',
+            leftItem: existingNotes.leftItem || '',
+            rightItem: existingNotes.rightItem || '',
+            caseFontColor: existingNotes.caseFontColor || '',
+            classType: existingNotes.classType || '',
+            customClass: existingNotes.customClass || '',
+            classNote: existingNotes.classNote || '',
+            hasSubclass: existingNotes.hasSubclass ?? false,
+            bulletData: existingNotes.bulletData,
+            cartridgeCaseData: existingNotes.cartridgeCaseData,
+            shotshellData: existingNotes.shotshellData,
+            indexType: existingNotes.indexType || 'color',
+            indexNumber: existingNotes.indexNumber || '',
+            indexColor: existingNotes.indexColor || '',
+            supportLevel: existingNotes.supportLevel || '',
+            includeConfirmation: existingNotes.includeConfirmation,
+            additionalNotes: existingNotes.additionalNotes || ''
+          }));
         } else {
           setIsConfirmedImage(false);
+
+          setSavedSnapshot(serializeNotesSnapshot({
+            leftCase: '',
+            rightCase: '',
+            leftItem: '',
+            rightItem: '',
+            caseFontColor: '',
+            classType: '',
+            customClass: '',
+            classNote: '',
+            hasSubclass: false,
+            bulletData: undefined,
+            cartridgeCaseData: undefined,
+            shotshellData: undefined,
+            indexType: 'color',
+            indexNumber: '',
+            indexColor: '',
+            supportLevel: '',
+            includeConfirmation: false,
+            additionalNotes: ''
+          }));
         }
       } catch (error) {
         setLoadError('Failed to load existing notes');
         console.error('Error loading notes:', error);
       } finally {
         setIsLoading(false);
+        setHasLoadedSnapshot(true);
       }
     };
 
     loadExistingNotes();
-  }, [imageId, currentCase, user]);
+  }, [imageId, currentCase, onDirtyChange, user]);
+
+  useIsomorphicLayoutEffect(() => {
+    onDirtyChange?.(isDirty);
+  }, [isDirty, onDirtyChange]);
 
  useEffect(() => {
     if (useCurrentCaseLeft) {
@@ -129,11 +296,11 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
     }
   }, [useCurrentCaseLeft, useCurrentCaseRight, currentCase]);
 
-  const handleSave = async () => {
+  const handleSave = useCallback(async (): Promise<boolean> => {
 
     if (!imageId) {
       console.error('No image selected');
-      return;
+      return false;
     }
 
     let existingData: AnnotationData | null = null;
@@ -145,8 +312,12 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       if (existingData?.confirmationData) {
         setIsConfirmedImage(true);
         notificationHandler('This image is confirmed. Notes cannot be modified.', 'error');
-        return;
+        return false;
       }
+
+      const normalizedBulletData = normalizeNestedAnnotationData(bulletData);
+      const normalizedCartridgeCaseData = normalizeNestedAnnotationData(cartridgeCaseData);
+      const normalizedShotshellData = normalizeNestedAnnotationData(shotshellData);
       
       // Create updated annotation data, preserving box annotations and earliest timestamp
       const now = new Date().toISOString();
@@ -163,9 +334,9 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
         customClass: customClass,
         classNote: classNote || undefined,
         hasSubclass: hasSubclass,
-        bulletData: bulletData,
-        cartridgeCaseData: cartridgeCaseData,
-        shotshellData: shotshellData,
+        bulletData: normalizedBulletData,
+        cartridgeCaseData: normalizedCartridgeCaseData,
+        shotshellData: normalizedShotshellData,
         
         // Index Information
         indexType: indexType,
@@ -207,11 +378,36 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       );
       
       notificationHandler('Notes saved successfully.', 'success');
+
+      setSavedSnapshot(serializeNotesSnapshot({
+        leftCase,
+        rightCase,
+        leftItem,
+        rightItem,
+        caseFontColor,
+        classType,
+        customClass,
+        classNote,
+        hasSubclass,
+        bulletData,
+        cartridgeCaseData,
+        shotshellData,
+        indexType,
+        indexNumber,
+        indexColor,
+        supportLevel,
+        includeConfirmation,
+        additionalNotes,
+      }));
+      setIsDirty(false);
+      onDirtyChange?.(false);
       
       // Refresh annotation data after saving notes
       if (onAnnotationRefresh) {
         onAnnotationRefresh();
       }
+
+      return true;
     } catch (error) {
       console.error('Failed to save notes:', error);
       const errorMessage = error instanceof Error ? error.message : '';
@@ -237,8 +433,44 @@ export const NotesEditorForm = ({ currentCase, user, imageId, onAnnotationRefres
       } catch (auditError) {
         console.error('Failed to log annotation edit audit:', auditError);
       }
+
+      return false;
     }
-  };
+  }, [
+    additionalNotes,
+    bulletData,
+    cartridgeCaseData,
+    caseFontColor,
+    classNote,
+    classType,
+    currentCase,
+    customClass,
+    hasSubclass,
+    imageId,
+    includeConfirmation,
+    indexColor,
+    indexNumber,
+    indexType,
+    leftCase,
+    leftItem,
+    notificationHandler,
+    onAnnotationRefresh,
+    onDirtyChange,
+    originalFileName,
+    rightCase,
+    rightItem,
+    shotshellData,
+    supportLevel,
+    user,
+  ]);
+
+  useEffect(() => {
+    onRegisterSaveHandler?.(handleSave);
+
+    return () => {
+      onRegisterSaveHandler?.(null);
+    };
+  }, [handleSave, onRegisterSaveHandler]);
 
   return (
     <div className={`${styles.notesEditorForm} ${styles.editorLayout}`}>

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

@@ -1,4 +1,5 @@
 import type { User } from 'firebase/auth';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { NotesEditorForm } from './notes-editor-form';
 import styles from './notes.module.css';
@@ -26,21 +27,151 @@ export const NotesEditorModal = ({
   isUploading = false,
   showNotification,
 }: NotesEditorModalProps) => {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [isCloseAlertOpen, setIsCloseAlertOpen] = useState(false);
+  const [isSavingBeforeClose, setIsSavingBeforeClose] = useState(false);
+  const [saveHandler, setSaveHandler] = useState<(() => Promise<boolean>) | null>(null);
+  const closeAlertRef = useRef<HTMLDivElement | null>(null);
+  const saveAndCloseButtonRef = useRef<HTMLButtonElement | null>(null);
+  const closeAlertTitleId = useId();
+  const closeAlertDescriptionId = useId();
+
+  const handleCloseAttempt = useCallback(() => {
+    if (hasUnsavedChanges) {
+      setIsCloseAlertOpen(true);
+      return;
+    }
+
+    onClose();
+  }, [hasUnsavedChanges, onClose]);
+
+  const handleDirtyChange = useCallback((isDirty: boolean) => {
+    setHasUnsavedChanges((previous) => (previous === isDirty ? previous : isDirty));
+  }, []);
+
+  const handleRegisterSaveHandler = useCallback((handler: (() => Promise<boolean>) | null) => {
+    setSaveHandler((previous) => (previous === handler ? previous : handler));
+  }, []);
+
   const {
     overlayProps,
     getCloseButtonProps,
   } = useOverlayDismiss({
     isOpen,
-    onClose,
+    onClose: handleCloseAttempt,
+    closeOnEscape: !isCloseAlertOpen,
   });
 
+  const handleDiscardAndClose = () => {
+    setHasUnsavedChanges(false);
+    setIsCloseAlertOpen(false);
+    onClose();
+  };
+
+  const handleCancelClose = () => {
+    setIsCloseAlertOpen(false);
+  };
+
+  const canSaveBeforeClose = !!saveHandler && !isSavingBeforeClose;
+
+  const handleSaveBeforeClose = async () => {
+    if (!saveHandler) {
+      showNotification?.('Save is not ready yet. Please wait a moment and try again.', 'warning');
+      return;
+    }
+
+    setIsSavingBeforeClose(true);
+    let didSave = false;
+
+    try {
+      didSave = await saveHandler();
+    } catch (error) {
+      console.error('Failed to save notes before closing:', error);
+      showNotification?.('Failed to save notes. Please try again.', 'error');
+      didSave = false;
+    } finally {
+      setIsSavingBeforeClose(false);
+    }
+
+    if (!didSave) {
+      return;
+    }
+
+    setHasUnsavedChanges(false);
+    setIsCloseAlertOpen(false);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!isCloseAlertOpen) {
+      return;
+    }
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    saveAndCloseButtonRef.current?.focus();
+
+    const handleAlertKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        setIsCloseAlertOpen(false);
+        return;
+      }
+
+      if (event.key !== 'Tab') {
+        return;
+      }
+
+      const focusContainer = closeAlertRef.current;
+      if (!focusContainer) {
+        return;
+      }
+
+      const focusableElements = Array.from(
+        focusContainer.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      );
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const first = focusableElements[0];
+      const last = focusableElements[focusableElements.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleAlertKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleAlertKeyDown);
+      previouslyFocused?.focus();
+    };
+  }, [isCloseAlertOpen]);
+
   if (!isOpen) {
     return null;
   }
 
   return (
     <div className={styles.overlay} aria-label="Close image notes dialog" {...overlayProps}>
-      <div className={styles.editorModal} role="dialog" aria-modal="true" aria-label="Image Notes">
+      <div
+        className={styles.editorModal}
+        role="dialog"
+        aria-modal={isCloseAlertOpen ? undefined : true}
+        aria-label="Image Notes"
+        aria-hidden={isCloseAlertOpen}
+        inert={isCloseAlertOpen}
+      >
         <div className={styles.editorModalHeader}>
           <h2 className={styles.editorModalTitle}>Image Notes</h2>
           <button className={styles.editorModalCloseButton} {...getCloseButtonProps({ ariaLabel: 'Close image notes dialog' })}>
@@ -56,9 +187,57 @@ export const NotesEditorModal = ({
             originalFileName={originalFileName}
             isUploading={isUploading}
             showNotification={showNotification}
+            onDirtyChange={handleDirtyChange}
+            onRegisterSaveHandler={handleRegisterSaveHandler}
           />
         </div>
       </div>
+      {isCloseAlertOpen && (
+        <div className={styles.modalOverlay}>
+          <div
+            className={`${styles.modal} ${styles.unsavedChangesModal}`}
+            ref={closeAlertRef}
+            role="alertdialog"
+            aria-modal="true"
+            aria-labelledby={closeAlertTitleId}
+            aria-describedby={closeAlertDescriptionId}
+          >
+            <h3 id={closeAlertTitleId} className={styles.modalTitle}>You have unsaved notes!</h3>
+            <p id={closeAlertDescriptionId} className={styles.unsavedChangesMessage}>
+              You have unsaved changes to notes and data. Save before closing?
+            </p>
+            <div className={styles.unsavedChangesActions}>
+              <div className={styles.unsavedChangesPrimaryRow}>
+                <button
+                  ref={saveAndCloseButtonRef}
+                  type="button"
+                  onClick={handleSaveBeforeClose}
+                  className={`${styles.saveButton} ${styles.unsavedChangesPrimaryAction}`}
+                  disabled={!canSaveBeforeClose}
+                >
+                  {isSavingBeforeClose ? 'Saving...' : 'Save and Close'}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleDiscardAndClose}
+                  className={`${styles.cancelButton} ${styles.unsavedChangesPrimaryAction}`}
+                  disabled={isSavingBeforeClose}
+                >
+                  Close Without Saving
+                </button>
+              </div>
+              <button
+                type="button"
+                onClick={handleCancelClose}
+                className={styles.secondaryButton}
+                disabled={isSavingBeforeClose}
+              >
+                Continue Editing
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -688,6 +688,76 @@ textarea:focus {
   justify-content: flex-end;
 }
 
+.modalButtons .saveButton,
+.modalButtons .cancelButton {
+  min-height: 42px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.classDetailsModalButtons .classDetailsModalAction {
+  min-height: 42px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.unsavedChangesModal {
+  max-width: 520px;
+}
+
+.unsavedChangesModal .modalTitle {
+  margin-top: 0;
+}
+
+.unsavedChangesMessage {
+  margin: 0.75rem;
+  color: #495057;
+  line-height: 1.5;
+}
+
+.unsavedChangesActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.unsavedChangesPrimaryRow {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.unsavedChangesPrimaryAction {
+  width: 100%;
+  margin: 0;
+}
+
+.unsavedChangesPrimaryRow .cancelButton,
+.unsavedChangesPrimaryRow .saveButton {
+  width: 100%;
+  margin: 0;
+}
+
+.secondaryButton {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1.5px solid #ced4da;
+  border-radius: 6px;
+  background: white;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.secondaryButton:hover {
+  background-color: #f8f9fa;
+}
+
 .cancelButton {
   width: 30%;
   padding: 0.75rem;
@@ -705,6 +775,13 @@ textarea:focus {
   background-color: #bd2130;
 }
 
+.cancelButton:disabled,
+.saveButton:disabled,
+.secondaryButton:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
 .saveButton {
   width: 100%;
   padding: 0.75rem;

package/app/components/user/user.module.css

@@ -156,7 +156,7 @@
 .sectionLabel {
   display: block;
   font-weight: 600;
-  color: var(--textBody);
+  color: var(--textTitle);
   margin-bottom: var(--spaceS);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@striae-org/striae",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "private": false,
   "description": "Striae is a specialized, cloud-native platform designed to streamline forensic firearms identification by providing an intuitive environment for digital comparison image annotation, authenticated confirmations, and automated report generation.",
   "license": "Apache-2.0",
@@ -105,8 +105,8 @@
     "isbot": "^5.1.37",
     "jszip": "^3.10.1",
     "qrcode": "^1.5.4",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-router": "^7.14.0"
   },
   "devDependencies": {
@@ -128,7 +128,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.2",
     "vite-tsconfig-paths": "^6.1.1",
-    "wrangler": "^4.81.0"
+    "wrangler": "^4.81.1"
   },
   "overrides": {
     "@tootallnate/once": "3.0.1",

package/scripts/update-markdown-versions.cjs

@@ -7,6 +7,14 @@ const markdownFiles = [
   // Add other markdown files that need version updates
 ];
 
+const workerDirs = [
+  'workers/audit-worker',
+  'workers/data-worker',
+  'workers/image-worker',
+  'workers/pdf-worker',
+  'workers/user-worker',
+];
+
 function updateMarkdownVersions() {
   console.log(`📝 Updating markdown files with version ${packageJson.version}...`);
   
@@ -31,8 +39,57 @@ function updateMarkdownVersions() {
       console.error(`❌ Error updating ${filePath}:`, error.message);
     }
   });
+
+  console.log(`📦 Updating worker package.json files with version ${packageJson.version}...`);
+
+  workerDirs.forEach(workerDir => {
+    const pkgPath = path.join(__dirname, '..', workerDir, 'package.json');
+    const lockPath = path.join(__dirname, '..', workerDir, 'package-lock.json');
+
+    // --- Update package.json ---
+    if (!fs.existsSync(pkgPath)) {
+      console.log(`⚠️  Skipping ${workerDir}/package.json (file not found)`);
+    } else {
+      try {
+        const workerPkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+        workerPkg.version = packageJson.version;
+        fs.writeFileSync(pkgPath, JSON.stringify(workerPkg, null, 2) + '\n');
+        console.log(`✅ Updated ${workerDir}/package.json`);
+      } catch (error) {
+        console.error(`❌ Error updating ${workerDir}/package.json:`, error.message);
+      }
+    }
+
+    // --- Update package-lock.json ---
+    // Lockfile v2/v3 stores the version in two places:
+    //   - Top-level `version` field
+    //   - `packages[""].version` (the self-referencing root entry)
+    // Both must match package.json to pass `npm ci` consistency checks.
+    if (!fs.existsSync(lockPath)) {
+      console.log(
+        `⚠️  No package-lock.json found in ${workerDir} — run \`npm install\` there to generate one.`
+      );
+    } else {
+      try {
+        const lockData = JSON.parse(fs.readFileSync(lockPath, 'utf8'));
+
+        if ('version' in lockData) {
+          lockData.version = packageJson.version;
+        }
+
+        if (lockData.packages && '' in lockData.packages) {
+          lockData.packages[''].version = packageJson.version;
+        }
+
+        fs.writeFileSync(lockPath, JSON.stringify(lockData, null, 2) + '\n');
+        console.log(`✅ Updated ${workerDir}/package-lock.json`);
+      } catch (error) {
+        console.error(`❌ Error updating ${workerDir}/package-lock.json:`, error.message);
+      }
+    }
+  });
   
-  console.log('🎉 Markdown version update complete!');
+  console.log('🎉 Version update complete!');
 }
 
 // Run if called directly

package/workers/audit-worker/package.json

@@ -1,18 +1,17 @@
-{
-	"name": "audit-worker",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"deploy": "wrangler deploy",
-		"dev": "wrangler dev",
-		"start": "wrangler dev"
-	},
-	"devDependencies": {
-		"@cloudflare/puppeteer": "^1.0.6",
-		"wrangler": "^4.81.0"
-	},
-	"overrides": {
-		"undici": "7.24.1",
-		"yauzl": "3.2.1"
-	}
-}
+{
+  "name": "audit-worker",
+  "version": "5.5.1",
+  "private": true,
+  "scripts": {
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev"
+  },
+  "devDependencies": {
+    "wrangler": "^4.81.1"
+  },
+  "overrides": {
+    "undici": "7.24.1",
+    "yauzl": "3.2.1"
+  }
+}

package/workers/audit-worker/wrangler.jsonc.example

@@ -7,7 +7,7 @@
   "name": "AUDIT_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/audit-worker.ts",
-  "compatibility_date": "2026-04-08",
+  "compatibility_date": "2026-04-09",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/data-worker/package.json

@@ -1,18 +1,17 @@
-{
-  "name": "data-worker",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "deploy": "wrangler deploy",
-    "dev": "wrangler dev",
-    "start": "wrangler dev"
-  },
-  "devDependencies": {
-    "@cloudflare/puppeteer": "^1.0.6",
-    "wrangler": "^4.81.0"
-  },
-  "overrides": {
-    "undici": "7.24.1",
-    "yauzl": "3.2.1"
-  }
-}
+{
+  "name": "data-worker",
+  "version": "5.5.1",
+  "private": true,
+  "scripts": {
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev"
+  },
+  "devDependencies": {
+    "wrangler": "^4.81.1"
+  },
+  "overrides": {
+    "undici": "7.24.1",
+    "yauzl": "3.2.1"
+  }
+}

package/workers/data-worker/wrangler.jsonc.example

@@ -5,7 +5,7 @@
   "name": "DATA_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/data-worker.ts",
-  "compatibility_date": "2026-04-08",
+  "compatibility_date": "2026-04-09",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/image-worker/package.json

@@ -1,18 +1,17 @@
-{
-	"name": "image-worker",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"deploy": "wrangler deploy",
-		"dev": "wrangler dev",
-		"start": "wrangler dev"
-	},
-	"devDependencies": {
-		"@cloudflare/puppeteer": "^1.0.6",
-		"wrangler": "^4.81.0"
-	},
-	"overrides": {
-		"undici": "7.24.1",
-		"yauzl": "3.2.1"
-	}
-}
+{
+  "name": "image-worker",
+  "version": "5.5.1",
+  "private": true,
+  "scripts": {
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev"
+  },
+  "devDependencies": {
+    "wrangler": "^4.81.1"
+  },
+  "overrides": {
+    "undici": "7.24.1",
+    "yauzl": "3.2.1"
+  }
+}

package/workers/image-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "IMAGES_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/image-worker.ts",
-  "compatibility_date": "2026-04-08",
+  "compatibility_date": "2026-04-09",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/pdf-worker/package.json

@@ -1,19 +1,18 @@
-{
-	"name": "pdf-worker",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"generate:assets": "node scripts/generate-assets.js",
-		"deploy": "wrangler deploy",
-		"dev": "wrangler dev",
-		"start": "wrangler dev"
-	},
-	"devDependencies": {
-		"@cloudflare/puppeteer": "^1.0.6",
-		"wrangler": "^4.81.0"
-	},
-	"overrides": {
-		"undici": "7.24.1",
-		"yauzl": "3.2.1"
-	}
-}
+{
+  "name": "pdf-worker",
+  "version": "5.5.1",
+  "private": true,
+  "scripts": {
+    "generate:assets": "node scripts/generate-assets.js",
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev"
+  },
+  "devDependencies": {
+    "wrangler": "^4.81.1"
+  },
+  "overrides": {
+    "undici": "7.24.1",
+    "yauzl": "3.2.1"
+  }
+}

package/workers/pdf-worker/src/audit-trail-report.ts

@@ -3,13 +3,34 @@ import { buildRepeatedChromePdfOptions, escapeHtml } from './report-layout';
 
 const safeText = (value: unknown): string => escapeHtml(String(value ?? ''));
 
-const formatTimestamp = (timestamp: string): string => {
+const formatTimestamp = (timestamp: string, timezone?: string): string => {
   const parsed = new Date(timestamp);
   if (Number.isNaN(parsed.getTime())) {
     return timestamp;
   }
 
-  return parsed.toISOString();
+  if (!timezone) {
+    return parsed.toISOString();
+  }
+
+  try {
+      const parts = new Intl.DateTimeFormat('en-US', {
+        timeZone: timezone,
+        month: '2-digit',
+        day: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+        timeZoneName: 'short'
+      }).formatToParts(parsed);
+
+      const get = (type: string): string => parts.find(p => p.type === type)?.value ?? '';
+      return `${get('month')}/${get('day')}/${get('year')} ${get('hour')}:${get('minute')}:${get('second')} ${get('timeZoneName')}`;
+  } catch {
+    return parsed.toISOString();
+  }
 };
 
 const renderEntryDetailsSummary = (entry: Record<string, unknown>): string => {
@@ -71,6 +92,7 @@ export const getAuditTrailPayload = (data: PDFGenerationData): AuditTrailReportP
 export const renderAuditTrailReport = (data: PDFGenerationData): string => {
   const payload = getAuditTrailPayload(data);
   const entries = payload.entries || [];
+  const timezone = data.userTimezone;
 
   const entrySections = entries.map((entry, index) => {
     const entryRecord = entry as Record<string, unknown>;
@@ -84,7 +106,7 @@ export const renderAuditTrailReport = (data: PDFGenerationData): string => {
       <section class="entry-section">
         <h3 class="entry-title">Entry ${index + 1} of ${entries.length}</h3>
         <div class="entry-core-grid">
-          <div><strong>Timestamp:</strong> ${safeText(formatTimestamp(timestamp))}</div>
+          <div><strong>Timestamp:</strong> ${safeText(formatTimestamp(timestamp, timezone))}</div>
           <div><strong>Action:</strong> ${safeText(action)}</div>
           <div><strong>Result:</strong> ${safeText(result)}</div>
           <div><strong>User Email:</strong> ${safeText(userEmail)}</div>
@@ -195,9 +217,9 @@ export const renderAuditTrailReport = (data: PDFGenerationData): string => {
         <h1>Case Audit Trail Report</h1>
         <div class="summary-grid">
           <div><strong>Case Number:</strong> ${safeText(payload.caseNumber)}</div>
-          <div><strong>Exported At:</strong> ${safeText(formatTimestamp(payload.exportedAt))}</div>
-          <div><strong>Range Start:</strong> ${safeText(formatTimestamp(payload.exportRangeStart))}</div>
-          <div><strong>Range End:</strong> ${safeText(formatTimestamp(payload.exportRangeEnd))}</div>
+          <div><strong>Exported At:</strong> ${safeText(formatTimestamp(payload.exportedAt, timezone))}</div>
+          <div><strong>Range Start:</strong> ${safeText(formatTimestamp(payload.exportRangeStart, timezone))}</div>
+          <div><strong>Range End:</strong> ${safeText(formatTimestamp(payload.exportRangeEnd, timezone))}</div>
           <div><strong>Total Entries (All Parts):</strong> ${safeText(payload.totalEntries)}</div>
           <div><strong>This Part:</strong> ${safeText(payload.chunkIndex)} of ${safeText(payload.totalChunks)}</div>
           <div><strong>Entries in Part:</strong> ${safeText(entries.length)}</div>

package/workers/pdf-worker/src/report-types.ts

@@ -60,6 +60,7 @@ export interface PDFGenerationData {
   userBadgeId?: string;
   reportMode?: 'audit-trail';
   auditTrailReport?: AuditTrailReportPayload;
+  userTimezone?: string;
 }
 
 export interface AuditTrailReportPayload {

package/workers/pdf-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "PDF_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/pdf-worker.ts",
-  "compatibility_date": "2026-04-08",
+  "compatibility_date": "2026-04-09",
   "compatibility_flags": [
     "nodejs_compat"
   ],

package/workers/user-worker/package.json

@@ -1,18 +1,17 @@
-{
-  "name": "user-worker",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "deploy": "wrangler deploy",
-    "dev": "wrangler dev",
-    "start": "wrangler dev"
-  },
-  "devDependencies": {
-    "@cloudflare/puppeteer": "^1.0.6",
-    "wrangler": "^4.81.0"
-  },
-  "overrides": {
-    "undici": "7.24.1",
-    "yauzl": "3.2.1"
-  }
-}
+{
+  "name": "user-worker",
+  "version": "5.5.1",
+  "private": true,
+  "scripts": {
+    "deploy": "wrangler deploy",
+    "dev": "wrangler dev",
+    "start": "wrangler dev"
+  },
+  "devDependencies": {
+    "wrangler": "^4.81.1"
+  },
+  "overrides": {
+    "undici": "7.24.1",
+    "yauzl": "3.2.1"
+  }
+}

package/workers/user-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "USER_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/user-worker.ts",
-  "compatibility_date": "2026-04-08",
+  "compatibility_date": "2026-04-09",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/wrangler.toml.example

@@ -1,6 +1,6 @@
 #:schema node_modules/wrangler/config-schema.json
 name = "PAGES_PROJECT_NAME"
-compatibility_date = "2026-04-08"
+compatibility_date = "2026-04-09"
 compatibility_flags = ["nodejs_compat"]
 pages_build_output_dir = "./build/client"