@striae-org/striae 4.1.0 → 4.2.1

package/app/routes/striae/striae.module.css

@@ -1,7 +1,8 @@
 .appContainer {
   display: flex;
-  width: 100vw;
-  height: 100vh;  
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -9,6 +10,12 @@
   z-index: 10;
 }
 
+.contentRow {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
 .mainContent {
   flex: 1;
   display: flex;
@@ -27,4 +34,4 @@
   top: var(--spaceL);
   left: var(--spaceL);
   z-index: 30;
-}
+}

package/app/routes/striae/striae.tsx

@@ -1,22 +1,46 @@
 import type { User } from 'firebase/auth';
 import { useState, useEffect } from 'react';
 import { SidebarContainer } from '~/components/sidebar/sidebar-container';
+import { Navbar } from '~/components/navbar/navbar';
+import { RenameCaseModal } from '~/components/navbar/case-modals/rename-case-modal';
+import { ArchiveCaseModal } from '~/components/navbar/case-modals/archive-case-modal';
+import { OpenCaseModal } from '~/components/navbar/case-modals/open-case-modal';
 import { Toolbar } from '~/components/toolbar/toolbar';
 import { Canvas } from '~/components/canvas/canvas';
 import { Toast } from '~/components/toast/toast';
-import { getImageUrl } from '~/components/actions/image-manage';
+import { getImageUrl, fetchFiles, deleteFile } from '~/components/actions/image-manage';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { generatePDF } from '~/components/actions/generate-pdf';
+import { CaseExport, type ExportFormat } from '~/components/sidebar/case-export/case-export';
+import { CasesModal } from '~/components/sidebar/cases/cases-modal';
+import { FilesModal } from '~/components/sidebar/files/files-modal';
+import { NotesEditorModal } from '~/components/sidebar/notes/notes-editor-modal';
+import { UserAuditViewer } from '~/components/audit/user-audit-viewer';
 import { fetchUserApi } from '~/utils/api';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/ui';
 import { type AnnotationData, type FileData } from '~/types';
-import { checkCaseIsReadOnly } from '~/components/actions/case-manage';
+import type * as CaseExportActions from '~/components/actions/case-export';
+import { checkCaseIsReadOnly, validateCaseNumber, renameCase, deleteCase, checkExistingCase, createNewCase, archiveCase, getCaseArchiveDetails } from '~/components/actions/case-manage';
+import { checkReadOnlyCaseExists } from '~/components/actions/case-review';
+import { canCreateCase, getLimitsDescription, getUserData } from '~/utils/data';
 import styles from './striae.module.css';
 
 interface StriaePage {
   user: User;
 }
 
+type CaseExportActionsModule = typeof CaseExportActions;
+
+let caseExportActionsPromise: Promise<CaseExportActionsModule> | null = null;
+
+const loadCaseExportActions = (): Promise<CaseExportActionsModule> => {
+  if (!caseExportActionsPromise) {
+    caseExportActionsPromise = import('~/components/actions/case-export');
+  }
+
+  return caseExportActionsPromise;
+};
+
 export const Striae = ({ user }: StriaePage) => {
   // Image and error states
   const [selectedImage, setSelectedImage] = useState<string>();
@@ -34,9 +58,8 @@ export const Striae = ({ user }: StriaePage) => {
   // Case management states - All managed here
   const [currentCase, setCurrentCase] = useState<string>('');
   const [files, setFiles] = useState<FileData[]>([]);
-  const [caseNumber, setCaseNumber] = useState('');
-  const [successAction, setSuccessAction] = useState<'loaded' | 'created' | 'deleted' | null>(null);
   const [showNotes, setShowNotes] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
   const [isReadOnlyCase, setIsReadOnlyCase] = useState(false);
 
   // Annotation states
@@ -53,7 +76,27 @@ export const Striae = ({ user }: StriaePage) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const [showToast, setShowToast] = useState(false);
   const [toastMessage, setToastMessage] = useState('');
-  const [toastType, setToastType] = useState<'success' | 'error'>('success');
+  const [toastType, setToastType] = useState<'success' | 'error' | 'warning'>('success');
+  const [isCaseExportModalOpen, setIsCaseExportModalOpen] = useState(false);
+  const [isAuditTrailOpen, setIsAuditTrailOpen] = useState(false);
+  const [isRenameCaseModalOpen, setIsRenameCaseModalOpen] = useState(false);
+  const [isOpenCaseModalOpen, setIsOpenCaseModalOpen] = useState(false);
+  const [isListCasesModalOpen, setIsListCasesModalOpen] = useState(false);
+  const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
+  const [isRenamingCase, setIsRenamingCase] = useState(false);
+  const [isDeletingCase, setIsDeletingCase] = useState(false);
+  const [isArchivingCase, setIsArchivingCase] = useState(false);
+  const [isDeletingFile, setIsDeletingFile] = useState(false);
+  const [isOpeningCase, setIsOpeningCase] = useState(false);
+  const [openCaseHelperText, setOpenCaseHelperText] = useState('');
+  const [isArchiveCaseModalOpen, setIsArchiveCaseModalOpen] = useState(false);
+  const [archiveDetails, setArchiveDetails] = useState<{
+    archived: boolean;
+    archivedAt?: string;
+    archivedBy?: string;
+    archivedByDisplay?: string;
+    archiveReason?: string;
+  }>({ archived: false });
 
 
    useEffect(() => {
@@ -70,6 +113,7 @@ export const Striae = ({ user }: StriaePage) => {
       setActiveAnnotations(new Set());
       setIsBoxAnnotationMode(false);
       setIsReadOnlyCase(false);
+      setArchiveDetails({ archived: false });
     }
   }, [currentCase]);
 
@@ -100,7 +144,6 @@ export const Striae = ({ user }: StriaePage) => {
 
   const handleCaseChange = (caseNumber: string) => {
     setCurrentCase(caseNumber);
-    setCaseNumber(caseNumber);
     setAnnotationData(null);
     setSelectedFilename(undefined);
     setImageId(undefined);    
@@ -118,9 +161,12 @@ export const Striae = ({ user }: StriaePage) => {
         // Check if the case data itself has isReadOnly: true
         const isReadOnly = await checkCaseIsReadOnly(user, currentCase);
         setIsReadOnlyCase(isReadOnly);
+        const details = await getCaseArchiveDetails(user, currentCase);
+        setArchiveDetails(details);
       } catch (error) {
         console.error('Error checking read-only status:', error);
         setIsReadOnlyCase(false);
+        setArchiveDetails({ archived: false });
       }
     };
 
@@ -183,16 +229,309 @@ export const Striae = ({ user }: StriaePage) => {
     });
   };
 
+  const showNotification = (message: string, type: 'success' | 'error' | 'warning' = 'success') => {
+    setToastType(type);
+    setToastMessage(message);
+    setShowToast(true);
+  };
+
   // Close toast notification
   const closeToast = () => {
     setShowToast(false);
   };
 
+  const handleExport = async (
+    exportCaseNumber: string,
+    format: ExportFormat,
+    includeImages?: boolean,
+    onProgress?: (progress: number, label: string) => void
+  ) => {
+    const caseExportActions = await loadCaseExportActions();
+
+    if (includeImages) {
+      await caseExportActions.downloadCaseAsZip(user, exportCaseNumber, format, (progress) => {
+        const label = progress < 30 ? 'Loading case data'
+          : progress < 50 ? 'Preparing archive'
+          : progress < 80 ? 'Adding images'
+          : progress < 96 ? 'Finalizing'
+          : 'Downloading';
+        onProgress?.(Math.round(progress), label);
+      });
+      showNotification(`Case ${exportCaseNumber} exported successfully.`, 'success');
+      return;
+    }
+
+    onProgress?.(5, 'Loading case data');
+    const exportData = await caseExportActions.exportCaseData(
+      user,
+      exportCaseNumber,
+      { includeMetadata: true },
+      (current, total, label) => {
+        const progress = total > 0 ? Math.round(10 + (current / total) * 60) : 10;
+        onProgress?.(progress, label);
+      }
+    );
+
+    onProgress?.(75, 'Preparing download');
+    if (format === 'json') {
+      await caseExportActions.downloadCaseAsJSON(user, exportData);
+    } else {
+      await caseExportActions.downloadCaseAsCSV(user, exportData);
+    }
+    onProgress?.(100, 'Complete');
+    showNotification(`Case ${exportCaseNumber} exported successfully.`, 'success');
+  };
+
+  const handleExportAll = async (
+    onProgress: (current: number, total: number, caseName: string) => void,
+    format: ExportFormat
+  ) => {
+    const caseExportActions = await loadCaseExportActions();
+    const exportData = await caseExportActions.exportAllCases(
+      user,
+      { includeMetadata: true },
+      onProgress
+    );
+
+    if (format === 'json') {
+      await caseExportActions.downloadAllCasesAsJSON(user, exportData);
+    } else {
+      await caseExportActions.downloadAllCasesAsCSV(user, exportData);
+    }
+
+    showNotification('All cases exported successfully.', 'success');
+  };
+
+  const handleRenameCaseSubmit = async (newCaseName: string) => {
+    if (!currentCase) {
+      showNotification('Select a case before renaming.', 'error');
+      return;
+    }
+
+    if (!validateCaseNumber(newCaseName)) {
+      showNotification('Invalid case number format.', 'error');
+      return;
+    }
+
+    setIsRenamingCase(true);
+    try {
+      const existingReadOnlyCase = await checkReadOnlyCaseExists(user, newCaseName);
+      if (existingReadOnlyCase) {
+        showNotification(`Case "${newCaseName}" already exists as a read-only review case.`, 'error');
+        return;
+      }
+
+      await renameCase(user, currentCase, newCaseName);
+      setCurrentCase(newCaseName);
+      setShowNotes(false);
+      setIsRenameCaseModalOpen(false);
+      showNotification(`Case renamed to ${newCaseName}.`, 'success');
+    } catch (renameError) {
+      showNotification(renameError instanceof Error ? renameError.message : 'Failed to rename case.', 'error');
+    } finally {
+      setIsRenamingCase(false);
+    }
+  };
+
+  const handleDeleteCaseAction = async () => {
+    if (!currentCase) {
+      showNotification('Select a case before deleting.', 'error');
+      return;
+    }
+
+    const confirmed = window.confirm(
+      `Are you sure you want to delete case ${currentCase}? This will permanently delete all associated files and cannot be undone. If any image assets are already missing (404), they will be skipped and the case deletion will continue.`
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    setIsDeletingCase(true);
+    try {
+      const deleteResult = await deleteCase(user, currentCase);
+      setCurrentCase('');
+      setFiles([]);
+      setShowNotes(false);
+      setIsAuditTrailOpen(false);
+      setIsRenameCaseModalOpen(false);
+      if (deleteResult.missingImages.length > 0) {
+        showNotification(
+          `Case deleted. ${deleteResult.missingImages.length} image(s) were not found and were skipped during deletion.`,
+          'warning'
+        );
+      } else {
+        showNotification('Case deleted successfully.', 'success');
+      }
+    } catch (deleteError) {
+      showNotification(deleteError instanceof Error ? deleteError.message : 'Failed to delete case.', 'error');
+    } finally {
+      setIsDeletingCase(false);
+    }
+  };
+
+  const handleDeleteCurrentFileAction = async () => {
+    if (!currentCase || !imageId) {
+      showNotification('Load an image before deleting a file.', 'error');
+      return;
+    }
+
+    if (isReadOnlyCase) {
+      showNotification('Cannot delete files for read-only cases.', 'error');
+      return;
+    }
+
+    const selectedFile = files.find((file) => file.id === imageId);
+    const selectedFileName = selectedFile?.originalFilename || imageId;
+    const confirmed = window.confirm(
+      `Are you sure you want to delete ${selectedFileName}? This action cannot be undone.`
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    setIsDeletingFile(true);
+    try {
+      const deleteResult = await deleteFile(user, currentCase, imageId, 'User-requested deletion via navbar file management');
+      const updatedFiles = files.filter((file) => file.id !== imageId);
+      setFiles(updatedFiles);
+      handleImageSelect({ id: 'clear', originalFilename: '/clear.jpg', uploadedAt: '' });
+      setShowNotes(false);
+      if (deleteResult.imageMissing) {
+        showNotification(
+          `File record deleted. Image asset "${deleteResult.fileName}" was not found and was skipped.`,
+          'warning'
+        );
+      } else {
+        showNotification('File deleted successfully.', 'success');
+      }
+    } catch (deleteError) {
+      showNotification(deleteError instanceof Error ? deleteError.message : 'Failed to delete file.', 'error');
+    } finally {
+      setIsDeletingFile(false);
+    }
+  };
+
+  const handleArchiveCaseSubmit = async (archiveReason: string) => {
+    if (!currentCase) {
+      showNotification('Select a case before archiving.', 'error');
+      return;
+    }
+
+    if (isReadOnlyCase) {
+      showNotification('This case is already read-only and cannot be archived again.', 'error');
+      return;
+    }
+
+    setIsArchivingCase(true);
+    try {
+      await archiveCase(user, currentCase, archiveReason);
+      setIsReadOnlyCase(true);
+      setArchiveDetails({
+        archived: true,
+        archivedAt: new Date().toISOString(),
+        archivedBy: user.uid,
+        archivedByDisplay: [
+          [userFirstName.trim(), userLastName.trim()].filter(Boolean).join(' ').trim(),
+          userBadgeId.trim(),
+        ].filter(Boolean).join(', ') || user.uid,
+        archiveReason: archiveReason.trim() || undefined,
+      });
+      setShowNotes(false);
+      setIsArchiveCaseModalOpen(false);
+      showNotification('Case archived successfully. The archive package download has started.', 'success');
+    } catch (archiveError) {
+      showNotification(archiveError instanceof Error ? archiveError.message : 'Failed to archive case.', 'error');
+    } finally {
+      setIsArchivingCase(false);
+    }
+  };
+
+  const loadCaseIntoWorkspace = async (caseToLoad: string) => {
+    setCurrentCase(caseToLoad);
+    setShowNotes(false);
+    const loadedFiles = await fetchFiles(user, caseToLoad, { skipValidation: true });
+    setFiles(loadedFiles);
+    showNotification(`Case ${caseToLoad} loaded successfully.`, 'success');
+  };
+
+  const handleOpenCaseSubmit = async (nextCaseNumber: string) => {
+    if (!validateCaseNumber(nextCaseNumber)) {
+      showNotification('Invalid case number format.', 'error');
+      return;
+    }
+
+    setIsOpeningCase(true);
+    try {
+      const existingCase = await checkExistingCase(user, nextCaseNumber);
+      if (existingCase) {
+        await loadCaseIntoWorkspace(nextCaseNumber);
+        setIsOpenCaseModalOpen(false);
+        return;
+      }
+
+      const existingReadOnlyCase = await checkReadOnlyCaseExists(user, nextCaseNumber);
+      if (existingReadOnlyCase) {
+        showNotification(`Case "${nextCaseNumber}" already exists as a read-only review case.`, 'error');
+        return;
+      }
+
+      const permission = await canCreateCase(user);
+      if (!permission.canCreate) {
+        showNotification(permission.reason || 'You cannot create more cases.', 'error');
+        return;
+      }
+
+      const newCase = await createNewCase(user, nextCaseNumber);
+      setCurrentCase(newCase.caseNumber);
+      setFiles([]);
+      setShowNotes(false);
+      setIsOpenCaseModalOpen(false);
+      showNotification(`Case ${newCase.caseNumber} created successfully.`, 'success');
+    } catch (openCaseError) {
+      showNotification(openCaseError instanceof Error ? openCaseError.message : 'Failed to load/create case.', 'error');
+    } finally {
+      setIsOpeningCase(false);
+    }
+  };
+
+  const handleOpenCaseModal = async () => {
+    setIsOpenCaseModalOpen(true);
+    try {
+      const userData = await getUserData(user);
+      if (userData && !userData.permitted) {
+        const limitsDescription = await getLimitsDescription(user);
+        setOpenCaseHelperText(limitsDescription || 'Load an existing case or create a new one.');
+      } else {
+        setOpenCaseHelperText('Load an existing case or create a new one.');
+      }
+    } catch {
+      setOpenCaseHelperText('Load an existing case or create a new one.');
+    }
+  };
+
   // Function to refresh annotation data (called when notes are saved)
   const refreshAnnotationData = () => {
     setAnnotationRefreshTrigger(prev => prev + 1);
   };
 
+  // Handle import/clear read-only case
+  const handleImportComplete = (result: { success: boolean; caseNumber?: string; isReadOnly?: boolean }) => {
+    if (result.success) {
+      if (result.caseNumber && result.isReadOnly) {
+        // Successful read-only case import - load the case
+        handleCaseChange(result.caseNumber);
+      } else if (!result.caseNumber && !result.isReadOnly) {
+        // Read-only case cleared - reset all UI state
+        setCurrentCase('');
+        setFiles([]);
+        handleImageSelect({ id: 'clear', originalFilename: '/clear.jpg', uploadedAt: '' });
+        setShowNotes(false);
+      }
+    }
+  };
+
   useEffect(() => {
     // Cleanup function to clear image when component unmounts
     return () => {
@@ -287,6 +626,15 @@ export const Striae = ({ user }: StriaePage) => {
   }
 };
 
+  const hasLoadedImage = !!(selectedImage && selectedImage !== '/clear.jpg' && imageLoaded);
+  const isCurrentImageConfirmed = hasLoadedImage && !!annotationData?.confirmationData;
+
+  useEffect(() => {
+    if (showNotes && (!hasLoadedImage || isCurrentImageConfirmed)) {
+      setShowNotes(false);
+    }
+  }, [showNotes, hasLoadedImage, isCurrentImageConfirmed]);
+
   // Automatic save handler for annotation updates
   const handleAnnotationUpdate = async (data: AnnotationData) => {
     if (annotationData?.confirmationData) {
@@ -352,31 +700,57 @@ export const Striae = ({ user }: StriaePage) => {
 
   return (
     <div className={styles.appContainer}>
-     <SidebarContainer 
-        user={user} 
-        onImageSelect={handleImageSelect}
-        imageId={imageId}
-        onCaseChange={handleCaseChange}
-        currentCase={currentCase}
-        setCurrentCase={setCurrentCase}
-        imageLoaded={imageLoaded}
-        setImageLoaded={setImageLoaded}
-        files={files}
-        setFiles={setFiles}
-        caseNumber={caseNumber}
-        setCaseNumber={setCaseNumber}
-        error={error ?? ''}
-        setError={setError}
-        successAction={successAction}
-        setSuccessAction={setSuccessAction}
-        showNotes={showNotes}
-        setShowNotes={setShowNotes}
-        onAnnotationRefresh={refreshAnnotationData}
+      <Navbar
+        isUploading={isUploading}
+        company={userCompany}
         isReadOnly={isReadOnlyCase}
-        isConfirmed={!!annotationData?.confirmationData}
-        confirmationSaveVersion={confirmationSaveVersion}
+        currentCase={currentCase}
+        currentFileName={selectedFilename}
+        isCurrentImageConfirmed={isCurrentImageConfirmed}
+        hasLoadedCase={!!currentCase}
+        hasLoadedImage={hasLoadedImage}
+        archiveDetails={archiveDetails}
+        onImportComplete={handleImportComplete}
+        onOpenCase={() => {
+          void handleOpenCaseModal();
+        }}
+        onOpenListAllCases={() => setIsListCasesModalOpen(true)}
+        onOpenCaseExport={() => setIsCaseExportModalOpen(true)}
+        onOpenAuditTrail={() => setIsAuditTrailOpen(true)}
+        onOpenRenameCase={() => setIsRenameCaseModalOpen(true)}
+        onDeleteCase={() => {
+          void handleDeleteCaseAction();
+        }}
+        onArchiveCase={() => setIsArchiveCaseModalOpen(true)}
+        onOpenViewAllFiles={() => setIsFilesModalOpen(true)}
+        onDeleteCurrentFile={() => {
+          void handleDeleteCurrentFileAction();
+        }}
+        onOpenImageNotes={() => setShowNotes(true)}
       />
-      <main className={styles.mainContent}>
+      <div className={styles.contentRow}>
+        <SidebarContainer 
+          user={user} 
+          onImageSelect={handleImageSelect}
+          onOpenCase={() => {
+            void handleOpenCaseModal();
+          }}
+          imageId={imageId}
+          currentCase={currentCase}
+          imageLoaded={imageLoaded}
+          setImageLoaded={setImageLoaded}
+          files={files}
+          setFiles={setFiles}
+          showNotes={showNotes}
+          setShowNotes={setShowNotes}
+          onAnnotationRefresh={refreshAnnotationData}
+          isReadOnly={isReadOnlyCase}
+          isConfirmed={!!annotationData?.confirmationData}
+          confirmationSaveVersion={confirmationSaveVersion}
+          isUploading={isUploading}
+          onUploadStatusChange={setIsUploading}
+        />
+        <main className={styles.mainContent}>
         <div className={styles.canvasArea}>
           <div className={styles.toolbarWrapper}>
             <Toolbar 
@@ -404,11 +778,82 @@ export const Striae = ({ user }: StriaePage) => {
             boxAnnotationColor={boxAnnotationColor}
             onAnnotationUpdate={handleAnnotationUpdate}
             isReadOnly={isReadOnlyCase}
+            isArchivedCase={archiveDetails.archived}
             caseNumber={currentCase}
             currentImageId={imageId}
           />
         </div>
-      </main>
+        </main>
+      </div>
+      <OpenCaseModal
+        isOpen={isOpenCaseModalOpen}
+        isSubmitting={isOpeningCase}
+        helperText={openCaseHelperText}
+        onClose={() => setIsOpenCaseModalOpen(false)}
+        onSubmit={handleOpenCaseSubmit}
+      />
+      <CasesModal
+        isOpen={isListCasesModalOpen}
+        onClose={() => setIsListCasesModalOpen(false)}
+        onSelectCase={(selectedCase) => {
+          void loadCaseIntoWorkspace(selectedCase);
+        }}
+        currentCase={currentCase || ''}
+        user={user}
+        confirmationSaveVersion={confirmationSaveVersion}
+      />
+      <FilesModal
+        isOpen={isFilesModalOpen}
+        onClose={() => setIsFilesModalOpen(false)}
+        onFileSelect={(file) => {
+          void handleImageSelect(file);
+        }}
+        currentCase={currentCase || null}
+        files={files}
+        setFiles={setFiles}
+        isReadOnly={isReadOnlyCase}
+        selectedFileId={imageId}
+        confirmationSaveVersion={confirmationSaveVersion}
+      />
+      <NotesEditorModal
+        isOpen={showNotes}
+        onClose={() => setShowNotes(false)}
+        currentCase={currentCase}
+        user={user}
+        imageId={imageId || ''}
+        onAnnotationRefresh={refreshAnnotationData}
+        originalFileName={files.find(file => file.id === imageId)?.originalFilename}
+        isUploading={isUploading}
+        showNotification={showNotification}
+      />
+      <CaseExport
+        isOpen={isCaseExportModalOpen}
+        onClose={() => setIsCaseExportModalOpen(false)}
+        onExport={handleExport}
+        onExportAll={handleExportAll}
+        currentCaseNumber={currentCase}
+        isReadOnly={isReadOnlyCase}
+      />
+      <UserAuditViewer
+        caseNumber={currentCase || ''}
+        isOpen={isAuditTrailOpen}
+        onClose={() => setIsAuditTrailOpen(false)}
+        title={`Audit Trail - Case ${currentCase}`}
+      />
+      <RenameCaseModal
+        isOpen={isRenameCaseModalOpen}
+        currentCase={currentCase}
+        isSubmitting={isRenamingCase || isDeletingCase || isDeletingFile || isArchivingCase}
+        onClose={() => setIsRenameCaseModalOpen(false)}
+        onSubmit={handleRenameCaseSubmit}
+      />
+      <ArchiveCaseModal
+        isOpen={isArchiveCaseModalOpen}
+        currentCase={currentCase}
+        isSubmitting={isArchivingCase}
+        onClose={() => setIsArchiveCaseModalOpen(false)}
+        onSubmit={handleArchiveCaseSubmit}
+      />
       <Toast
         message={toastMessage}
         type={toastType}