@striae-org/striae 4.1.0 → 4.2.0

package/app/components/actions/image-manage.ts

@@ -7,6 +7,17 @@ import { canUploadFile, getCaseData, updateCaseData, deleteFileAnnotations } fro
 import type { CaseData, FileData, ImageUploadResponse } from '~/types';
 import { auditService } from '~/services/audit';
 
+export interface DeleteFileResult {
+  imageMissing: boolean;
+  fileName: string;
+}
+
+export interface DeleteFileOptions {
+  skipValidation?: boolean;
+  skipCaseDataUpdate?: boolean;
+  suppressAudit?: boolean;
+}
+
 export const fetchFiles = async (
   user: User, 
   caseNumber: string, 
@@ -114,7 +125,13 @@ export const uploadFile = async (
   }
 };
 
-export const deleteFile = async (user: User, caseNumber: string, fileId: string, deleteReason: string = 'User-requested deletion via file list'): Promise<void> => {
+export const deleteFile = async (
+  user: User,
+  caseNumber: string,
+  fileId: string,
+  deleteReason: string = 'User-requested deletion via file list',
+  options: DeleteFileOptions = {}
+): Promise<DeleteFileResult> => {
   const startTime = Date.now();
   
   // Get file info for audit logging (outside try block so it's available in catch)
@@ -123,7 +140,9 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
   
   try {
     // Get the case data using centralized function
-    const caseData = await getCaseData(user, caseNumber);
+    const caseData = await getCaseData(user, caseNumber, {
+      skipValidation: options.skipValidation === true
+    });
     if (!caseData) {
       throw new Error('Case not found');
     }
@@ -133,6 +152,7 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
     const fileSize = 0; // We don't store file size, so use 0
 
     let imageDeleteFailed = false;
+    let imageMissing = false;
     let imageDeleteError = '';
 
     // Attempt to delete image file
@@ -145,6 +165,7 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
       if (imageResponse.status === 404) {
         // Image already doesn't exist - proceed with data cleanup
         console.warn(`Image ${fileId} not found (404) - proceeding with data cleanup`);
+        imageMissing = true;
       } else {
         // Other errors should still fail the operation
         imageDeleteFailed = true;
@@ -160,64 +181,76 @@ export const deleteFile = async (user: User, caseNumber: string, fileId: string,
     // Clean up data files regardless of image deletion success/404
     // Try to delete notes file using centralized function
     try {
-      await deleteFileAnnotations(user, caseNumber, fileId);
+      await deleteFileAnnotations(user, caseNumber, fileId, {
+        skipValidation: options.skipValidation === true
+      });
     } catch (error) {
       // Ignore 404 errors - notes file might not exist
       console.log('Notes file deletion result:', error);
     }
 
-    // Update case data.json to remove file reference using centralized function
-    const updatedData: CaseData = {
-      ...caseData,
-      files: (caseData.files || []).filter((f: FileData) => f.id !== fileId)
-    };
+    if (options.skipCaseDataUpdate !== true) {
+      // Update case data.json to remove file reference using centralized function
+      const updatedData: CaseData = {
+        ...caseData,
+        files: (caseData.files || []).filter((f: FileData) => f.id !== fileId)
+      };
 
-    await updateCaseData(user, caseNumber, updatedData);
+      await updateCaseData(user, caseNumber, updatedData);
+    }
 
     // Log successful file deletion
     const endTime = Date.now();
-    try {
-      await auditService.logFileDeletion(
-        user,
-        fileName,
-        fileSize,
-        deleteReason,
-        caseNumber,
-        fileId,
-        fileToDelete?.originalFilename
-      );
-    } catch (auditError) {
-      console.error('Failed to log file deletion:', auditError);
+    if (options.suppressAudit !== true) {
+      try {
+        await auditService.logFileDeletion(
+          user,
+          fileName,
+          fileSize,
+          deleteReason,
+          caseNumber,
+          fileId,
+          fileToDelete?.originalFilename
+        );
+      } catch (auditError) {
+        console.error('Failed to log file deletion:', auditError);
+      }
     }
 
     console.log(`✅ File deleted: ${fileName} (${endTime - startTime}ms)`);
+    return {
+      imageMissing,
+      fileName
+    };
     
   } catch (error) {
     // Log failed file deletion
     const endTime = Date.now();
-    try {
-      await auditService.logEvent({
-        userId: user.uid,
-        userEmail: user.email || '',
-        action: 'file-delete',
-        result: 'failure',
-        fileName: fileName, // Now uses the original filename
-        fileType: 'unknown',
-        validationErrors: [error instanceof Error ? error.message : 'Unknown error'],
-        caseNumber,
-        fileDetails: {
-          fileId: fileId,
-          fileSize: 0,
-          deleteReason: 'Failed deletion attempt',
-          originalFileName: fileToDelete?.originalFilename
-        },
-        performanceMetrics: {
-          processingTimeMs: endTime - startTime,
-          fileSizeBytes: 0
-        }
-      });
-    } catch (auditError) {
-      console.error('Failed to log file deletion failure:', auditError);
+    if (options.suppressAudit !== true) {
+      try {
+        await auditService.logEvent({
+          userId: user.uid,
+          userEmail: user.email || '',
+          action: 'file-delete',
+          result: 'failure',
+          fileName: fileName, // Now uses the original filename
+          fileType: 'unknown',
+          validationErrors: [error instanceof Error ? error.message : 'Unknown error'],
+          caseNumber,
+          fileDetails: {
+            fileId: fileId,
+            fileSize: 0,
+            deleteReason: 'Failed deletion attempt',
+            originalFileName: fileToDelete?.originalFilename
+          },
+          performanceMetrics: {
+            processingTimeMs: endTime - startTime,
+            fileSizeBytes: 0
+          }
+        });
+      } catch (auditError) {
+        console.error('Failed to log file deletion failure:', auditError);
+      }
     }
     
     console.error('Error in deleteFile:', error);

package/app/components/audit/user-audit-viewer.tsx

@@ -58,6 +58,8 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
     error,
     setError,
     auditTrail,
+    isArchivedReadOnlyCase,
+    bundledAuditWarning,
     loadAuditData
   } = useAuditViewerData({
     isOpen,
@@ -84,8 +86,8 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
   });
 
   const {
-    handleOverlayMouseDown,
-    handleOverlayKeyDown
+    requestClose,
+    overlayProps
   } = useOverlayDismiss({
     isOpen,
     onClose
@@ -98,11 +100,8 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
   return (
     <div
       className={styles.overlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close audit trail dialog"
+      {...overlayProps}
     >
       <div className={styles.modal}>
         <AuditViewerHeader
@@ -111,7 +110,7 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
           onExportCSV={handleExportCSV}
           onExportJSON={handleExportJSON}
           onGenerateReport={handleGenerateReport}
-          onClose={onClose}
+          onClose={requestClose}
         />
 
         <div className={styles.content}>
@@ -133,6 +132,14 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
 
           {!loading && !error && (
             <>
+              {isArchivedReadOnlyCase && (
+                <div className={bundledAuditWarning ? styles.archivedWarning : styles.archivedNotice}>
+                  <p>
+                    {bundledAuditWarning || 'Viewing bundled audit trail data from this imported archived case package.'}
+                  </p>
+                </div>
+              )}
+
               {/* User Information Section */}
               {user && (
                 <AuditUserInfoCard user={user} userData={userData} userBadgeId={userBadgeId} />
@@ -183,7 +190,11 @@ export const UserAuditViewer = ({ isOpen, onClose, caseNumber, title }: UserAudi
 
           {auditEntries.length === 0 && !loading && !error && (
             <div className={styles.noData}>
-              <p>No audit trail available. Your activities will appear here as you use Striae.</p>
+              <p>
+                {isArchivedReadOnlyCase
+                  ? 'No bundled audit trail entries are available for this imported archived case.'
+                  : 'No audit trail available. Your activities will appear here as you use Striae.'}
+              </p>
             </div>
           )}
         </div>

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

@@ -101,6 +101,27 @@
   padding: 20px;
 }
 
+.archivedNotice,
+.archivedWarning {
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  border-radius: 6px;
+  border: 1px solid;
+  font-size: 0.9rem;
+}
+
+.archivedNotice {
+  background: color-mix(in lab, var(--primary) 8%, transparent);
+  border-color: color-mix(in lab, var(--primary) 35%, transparent);
+  color: var(--textBody);
+}
+
+.archivedWarning {
+  background: color-mix(in lab, var(--warning) 12%, transparent);
+  border-color: color-mix(in lab, var(--warning) 40%, transparent);
+  color: var(--text);
+}
+
 /* Loading & Error States */
 .loading,
 .error {

package/app/components/audit/viewer/audit-entries-list.tsx

@@ -44,6 +44,13 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
                 </div>
               )}
 
+              {entry.action === 'confirmation-import' && entry.details.reviewerBadgeId && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Reviewer Badge/ID:</span>
+                  <span className={styles.badgeTag}>{entry.details.reviewerBadgeId}</span>
+                </div>
+              )}
+
               {entry.result === 'failure' && entry.details.validationErrors.length > 0 && (
                 <div className={styles.detailRow}>
                   <span className={styles.detailLabel}>Error:</span>

package/app/components/audit/viewer/audit-filters-panel.tsx

@@ -259,6 +259,7 @@ export const AuditFiltersPanel = ({
             <option value="case-create">Case Create</option>
             <option value="case-rename">Case Rename</option>
             <option value="case-delete">Case Delete</option>
+            <option value="case-archive">Case Archive</option>
             <option value="case-export">Case Export</option>
             <option value="case-import">Case Import</option>
           </optgroup>

package/app/components/audit/viewer/audit-viewer-utils.ts

@@ -32,6 +32,8 @@ export const getAuditActionIcon = (action: AuditAction): string => {
       return '✏️';
     case 'case-delete':
       return '🗑️';
+    case 'case-archive':
+      return '📦';
     case 'case-export':
       return '📤';
     case 'case-import':

package/app/components/audit/viewer/use-audit-viewer-data.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import type { User } from 'firebase/auth';
 import { auditService } from '~/services/audit';
 import { type AuditTrail, type UserData, type ValidationAuditEntry, type WorkflowPhase } from '~/types';
-import { getUserData } from '~/utils/data';
+import { getCaseData, getUserData } from '~/utils/data';
 import type { DateRangeFilter } from './types';
 
 const isWorkflowPhase = (phase: unknown): phase is WorkflowPhase =>
@@ -82,6 +82,8 @@ export const useAuditViewerData = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string>('');
   const [auditTrail, setAuditTrail] = useState<AuditTrail | null>(null);
+  const [isArchivedReadOnlyCase, setIsArchivedReadOnlyCase] = useState(false);
+  const [bundledAuditWarning, setBundledAuditWarning] = useState<string>('');
 
   const loadUserData = useCallback(async () => {
     if (!user) {
@@ -103,11 +105,27 @@ export const useAuditViewerData = ({
 
     setLoading(true);
     setError('');
+    setBundledAuditWarning('');
 
     try {
       const { startDate, endDate } = buildAuditDateQuery(dateRange, customStartDate, customEndDate);
 
+      if (effectiveCaseNumber) {
+        const caseData = await getCaseData(user, effectiveCaseNumber);
+        const archivedReadOnlyCase = Boolean(caseData?.isReadOnly && caseData.archived === true);
+        setIsArchivedReadOnlyCase(archivedReadOnlyCase);
+
+        if (archivedReadOnlyCase && !caseData?.bundledAuditTrail?.entries?.length) {
+          setBundledAuditWarning(
+            'This imported archived case does not include bundled audit trail data. No audit entries are available for this case.'
+          );
+        }
+      } else {
+        setIsArchivedReadOnlyCase(false);
+      }
+
       const entries = await auditService.getAuditEntriesForUser(user.uid, {
+        requestingUser: user,
         caseNumber: effectiveCaseNumber,
         startDate,
         endDate,
@@ -161,6 +179,8 @@ export const useAuditViewerData = ({
     error,
     setError,
     auditTrail,
+    isArchivedReadOnlyCase,
+    bundledAuditWarning,
     loadAuditData
   };
 };

package/app/components/canvas/box-annotations/box-annotations.module.css

@@ -59,16 +59,17 @@
 
 .annotationLabel {
   position: absolute;
-  bottom: -25px;
+  bottom: -30px;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   color: white;
-  padding: 2px 6px;
-  font-size: 12px;
-  border-radius: 3px;
+  padding: 4px 10px;
+  font-size: 13px;
+  line-height: 1.3;
+  border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
-  max-width: 200px;
+  max-width: 260px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -82,33 +83,33 @@
   background: white;
   border: 1px solid #ccc;
   border-radius: 6px;
-  padding: 12px;
+  padding: 16px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 200px;
+  min-width: 250px;
 }
 
 .labelDialogTitle {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 600;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
   color: #333;
 }
 
 .labelDialogNote {
-  font-size: 12px;
+  font-size: 13px;
   color: #666;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   font-style: italic;
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
 .labelInput {
   width: 100%;
-  padding: 6px 8px;
+  padding: 8px 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   box-sizing: border-box;
 }
 
@@ -120,18 +121,21 @@
 
 .labelDialogButtons {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   justify-content: flex-end;
+  margin-top: 8px;
 }
 
 .labelConfirmButton,
 .labelCancelButton {
-  padding: 6px 12px;
+  padding: 10px 18px;
   border: none;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 14px;
+  font-weight: 500;
   cursor: pointer;
   transition: background-color 0.2s ease;
+  min-width: 88px;
 }
 
 .labelConfirmButton {
@@ -167,4 +171,4 @@
 
 .readOnlyAnnotation:hover::after {
   display: none !important; /* Hide the delete button for read-only annotations */
-}
+}

package/app/components/canvas/box-annotations/box-annotations.tsx

@@ -89,6 +89,7 @@ export const BoxAnnotations = ({
 
   // Ref to track if component is mounted to prevent state updates after unmount
   const isMountedRef = useRef(true);
+  const labelInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     return () => {
@@ -96,6 +97,19 @@ export const BoxAnnotations = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (!labelDialog.isVisible) return;
+
+    const focusFrame = window.requestAnimationFrame(() => {
+      labelInputRef.current?.focus();
+      labelInputRef.current?.select();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+    };
+  }, [labelDialog.isVisible]);
+
   // Memoized function to get relative coordinates (more stable reference)
   const getRelativeCoordinates = useCallback((e: React.MouseEvent): { x: number; y: number } => {
     const imageElement = imageRef.current;
@@ -602,6 +616,7 @@ export const BoxAnnotations = ({
             }
           </div>
           <input
+            ref={labelInputRef}
             type="text"
             value={labelDialog.label}
             onChange={handleLabelChange}