@striae-org/striae 4.2.0 → 4.3.0

package/app/components/navbar/navbar.tsx

@@ -114,6 +114,7 @@ export const Navbar = ({
   }, [isCaseMenuOpen, isFileMenuOpen]);
 
   const caseActionsDisabled = false;
+  const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
   const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed;
@@ -139,7 +140,7 @@ export const Navbar = ({
               aria-haspopup="menu"
               disabled={caseActionsDisabled}
               onClick={() => setIsCaseMenuOpen((prev) => !prev)}
-              title={isUploading ? 'Cannot access case actions while uploading' : undefined}
+              title={isUploading ? 'Some case actions are unavailable while files are uploading' : undefined}
             >
               Case Management
             </button>
@@ -173,8 +174,14 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
-                  disabled={!hasLoadedCase}
-                  title={!hasLoadedCase ? 'Load a case to export case data' : undefined}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  title={
+                    !hasLoadedCase
+                      ? 'Load a case to export case data'
+                      : disableLongRunningCaseActions
+                        ? 'Export is unavailable while files are uploading'
+                        : undefined
+                  }
                   onClick={() => {
                     onOpenCaseExport?.();
                     setIsCaseMenuOpen(false);
@@ -203,8 +210,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemRename}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to rename it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to rename it'
+                        : disableLongRunningCaseActions
+                          ? 'Rename is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onOpenRenameCase?.();
                       setIsCaseMenuOpen(false);
@@ -218,8 +231,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to delete it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to delete it'
+                        : disableLongRunningCaseActions
+                          ? 'Delete is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onDeleteCase?.();
                       setIsCaseMenuOpen(false);
@@ -233,8 +252,14 @@ export const Navbar = ({
                     type="button"
                     role="menuitem"
                     className={`${styles.caseMenuItem} ${styles.caseMenuItemArchive}`}
-                    disabled={!hasLoadedCase}
-                    title={!hasLoadedCase ? 'Load a case to archive it' : undefined}
+                    disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                    title={
+                      !hasLoadedCase
+                        ? 'Load a case to archive it'
+                        : disableLongRunningCaseActions
+                          ? 'Archive is unavailable while files are uploading'
+                          : undefined
+                    }
                     onClick={() => {
                       onArchiveCase?.();
                       setIsCaseMenuOpen(false);

package/app/components/sidebar/cases/case-sidebar.tsx

@@ -1,21 +1,25 @@
 import type { User } from 'firebase/auth';
+import type React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './cases.module.css';
 import { FilesModal } from '../files/files-modal';
 import { ImageUploadZone } from '../upload/image-upload-zone';
+import { exportConfirmationData } from '../../actions/confirm-export';
 import {
   fetchFiles,
   deleteFile,
 } from '../../actions/image-manage';
 import { 
   canUploadFile, 
-  getFileAnnotations
+  ensureCaseConfirmationSummary,
+  getCaseConfirmationSummary
 } from '~/utils/data';
 import { type FileData } from '~/types';
 
 interface CaseSidebarProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageLoaded: boolean;
   setImageLoaded: (loaded: boolean) => void;
   onNotesClick: () => void;
@@ -23,17 +27,20 @@ interface CaseSidebarProps {
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   currentCase: string | null;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   selectedFileId?: string;
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;
   onUploadComplete?: (result: { successCount: number; failedFiles: string[] }) => void;
+  onExportNotification?: (message: string, type: 'success' | 'error') => void;
 }
 
 export const CaseSidebar = ({ 
   user, 
   onImageSelect, 
+  onOpenCase,
   imageLoaded,
   setImageLoaded,
   onNotesClick,
@@ -41,18 +48,21 @@ export const CaseSidebar = ({
   setFiles,
   currentCase,
   isReadOnly = false,
+  isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
   selectedFileId,
   isUploading = false,
   onUploadStatusChange,
-  onUploadComplete
+  onUploadComplete,
+  onExportNotification
 }: CaseSidebarProps) => {
   
   const [, setFileError] = useState('');
   const [canUploadNewFile, setCanUploadNewFile] = useState(true);
   const [uploadFileError, setUploadFileError] = useState('');
   const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
+  const [isExportingConfirmations, setIsExportingConfirmations] = useState(false);
   const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
   const [fileConfirmationStatus, setFileConfirmationStatus] = useState<{
     [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean }
@@ -67,21 +77,6 @@ export const CaseSidebar = ({
     [files]
   );
 
-  const calculateCaseConfirmationStatus = useCallback((
-    statuses: { [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean } }
-  ) => {
-    const filesRequiringConfirmation = files
-      .map((file) => statuses[file.id] || { includeConfirmation: false, isConfirmed: false })
-      .filter((status) => status.includeConfirmation);
-
-    const allConfirmedFiles = filesRequiringConfirmation.every((status) => status.isConfirmed);
-
-    return {
-      includeConfirmation: filesRequiringConfirmation.length > 0,
-      isConfirmed: filesRequiringConfirmation.length > 0 ? allConfirmedFiles : false,
-    };
-  }, [files]);
-
   // Function to check file upload permissions (extracted for reuse)
   const checkFileUploadPermissions = useCallback(async (fileCount?: number) => {
     if (currentCase) {
@@ -135,43 +130,24 @@ export const CaseSidebar = ({
         return;
       }
 
-      // Fetch all annotations in parallel
-      const annotationPromises = files.map(async (file) => {
-        try {
-          const annotations = await getFileAnnotations(user, currentCase, file.id);
-          return {
-            fileId: file.id,
-            includeConfirmation: annotations?.includeConfirmation ?? false,
-            isConfirmed: !!annotations?.confirmationData,
-          };
-        } catch (err) {
-          console.error(`Error fetching annotations for file ${file.id}:`, err);
-          return {
-            fileId: file.id,
-            includeConfirmation: false,
-            isConfirmed: false,
-          };
-        }
+      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((error) => {
+        console.error(`Error fetching confirmation summary for case ${currentCase}:`, error);
+        return null;
       });
 
-      // Wait for all fetches to complete
-      const results = await Promise.all(annotationPromises);
-
-      // Build the statuses map from results
-      const statuses: { [fileId: string]: { includeConfirmation: boolean; isConfirmed: boolean } } = {};
-      results.forEach((result) => {
-        statuses[result.fileId] = {
-          includeConfirmation: result.includeConfirmation,
-          isConfirmed: result.isConfirmed,
-        };
-      });
+      if (!caseSummary) {
+        return;
+      }
 
       if (isCancelled) {
         return;
       }
 
-      setFileConfirmationStatus(statuses);
-      setCaseConfirmationStatus(calculateCaseConfirmationStatus(statuses));
+      setFileConfirmationStatus(caseSummary.filesById);
+      setCaseConfirmationStatus({
+        includeConfirmation: caseSummary.includeConfirmation,
+        isConfirmed: caseSummary.isConfirmed
+      });
     };
 
     fetchConfirmationStatuses();
@@ -179,7 +155,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, files, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, files]);
 
   // Refresh only selected file confirmation status after confirmation-related data is persisted
   useEffect(() => {
@@ -191,24 +167,18 @@ export const CaseSidebar = ({
       }
 
       try {
-        const annotations = await getFileAnnotations(user, currentCase, selectedFileId);
-        const selectedStatus = {
-          includeConfirmation: annotations?.includeConfirmation ?? false,
-          isConfirmed: !!annotations?.confirmationData,
-        };
+        const caseSummary =
+          await getCaseConfirmationSummary(user, currentCase) ||
+          await ensureCaseConfirmationSummary(user, currentCase, files);
 
         if (isCancelled) {
           return;
         }
 
-        setFileConfirmationStatus((previous) => {
-          const next = {
-            ...previous,
-            [selectedFileId]: selectedStatus,
-          };
-
-          setCaseConfirmationStatus(calculateCaseConfirmationStatus(next));
-          return next;
+        setFileConfirmationStatus(caseSummary.filesById);
+        setCaseConfirmationStatus({
+          includeConfirmation: caseSummary.includeConfirmation,
+          isConfirmed: caseSummary.isConfirmed
         });
       } catch (err) {
         console.error(`Error refreshing confirmation status for file ${selectedFileId}:`, err);
@@ -220,7 +190,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files.length, calculateCaseConfirmationStatus]);
+  }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files]);
 
   const handleFileDelete = async (fileId: string) => {
     // Don't allow file deletion for read-only cases
@@ -260,6 +230,26 @@ const handleImageSelect = (file: FileData) => {
     setImageLoaded(false);
   };
 
+  const handleExportConfirmations = useCallback(async () => {
+    if (!currentCase || !isReadOnly || !isArchivedCase) {
+      return;
+    }
+
+    try {
+      setIsExportingConfirmations(true);
+      await exportConfirmationData(user, currentCase);
+      onExportNotification?.(`Confirmation export for case ${currentCase} downloaded successfully.`, 'success');
+    } catch (error) {
+      console.error('Failed to export confirmations:', error);
+      onExportNotification?.(
+        error instanceof Error ? error.message : 'Failed to export confirmation data.',
+        'error'
+      );
+    } finally {
+      setIsExportingConfirmations(false);
+    }
+  }, [currentCase, isArchivedCase, isReadOnly, onExportNotification, user]);
+
   const selectedFileConfirmationState = selectedFileId
     ? fileConfirmationStatus[selectedFileId]
     : undefined;
@@ -290,6 +280,14 @@ const handleImageSelect = (file: FileData) => {
     ? 'Select an image first'
     : undefined;
 
+  const showExportConfirmationsButton = Boolean(currentCase && isReadOnly && !isArchivedCase);
+
+  const exportConfirmationsTitle = isUploading
+    ? 'Cannot export confirmations while uploading'
+    : !currentCase
+    ? 'Load a case first'
+    : undefined;
+
 return (
     <>
     <div className={styles.caseSection}>
@@ -303,19 +301,30 @@ return (
         setFiles={setFiles}
         isReadOnly={isReadOnly}
         selectedFileId={selectedFileId}
+        confirmationSaveVersion={confirmationSaveVersion}
       />
       
         <div className={styles.filesSection}>
         <div className={currentCase ? (isReadOnly ? styles.readOnlyContainer : styles.caseHeader) : styles.emptyCaseHeader}>
-        <h4 className={`${styles.caseNumber} ${
-          currentCase && caseConfirmationStatus.includeConfirmation 
-            ? caseConfirmationStatus.isConfirmed 
-              ? styles.caseConfirmed 
-              : styles.caseNotConfirmed
-            : ''
-        }`}>
-          {currentCase || 'No Case Selected'}
-        </h4>
+        {currentCase ? (
+          <h4 className={`${styles.caseNumber} ${
+            caseConfirmationStatus.includeConfirmation 
+              ? caseConfirmationStatus.isConfirmed 
+                ? styles.caseConfirmed 
+                : styles.caseNotConfirmed
+              : ''
+          }`}>
+            {currentCase}
+          </h4>
+        ) : (
+          <button
+            type="button"
+            className={styles.openCaseButton}
+            onClick={onOpenCase}
+          >
+            Open Case
+          </button>
+        )}
       </div>
       {currentCase && (
         <ImageUploadZone
@@ -397,14 +406,25 @@ return (
       )}
     </div>
     <div className={styles.sidebarToggle}>
-    <button
+      {showExportConfirmationsButton ? (
+        <button
+          className={styles.confirmationExportButton}
+          onClick={() => void handleExportConfirmations()}
+          disabled={isUploading || !currentCase || isExportingConfirmations}
+          title={exportConfirmationsTitle}
+        >
+          {isExportingConfirmations ? 'Exporting...' : 'Export Confirmations'}
+        </button>
+      ) : (
+        <button
           onClick={onNotesClick}
           disabled={isImageNotesDisabled}
           title={imageNotesTitle}
         >
           Image Notes
         </button>
-        </div>
+      )}
+    </div>
       </div>
     </>
   );