@striae-org/striae 6.1.3 → 6.1.4

package/app/components/actions/case-manage/operations.ts

@@ -29,6 +29,23 @@ import { type CaseArchiveDetails, type DeleteCaseResult } from './types';
 export type { DeleteCaseResult, CaseArchiveDetails };
 export { validateCaseNumber };
 
+/**
+ * Derive archive details from already-fetched case data without making an additional
+ * network request. Use this when CaseData is already available to avoid a redundant fetch.
+ */
+export const deriveCaseArchiveDetails = (caseData: CaseData | null): CaseArchiveDetails => {
+  if (!caseData || !caseData.archived) {
+    return { archived: false };
+  }
+  return {
+    archived: true,
+    archivedAt: caseData.archivedAt,
+    archivedBy: caseData.archivedBy,
+    archivedByDisplay: caseData.archivedByDisplay,
+    archiveReason: caseData.archiveReason,
+  };
+};
+
 export const listCases = async (user: User): Promise<string[]> => {
   try {
     // Use centralized function to get user cases

package/app/components/auth/mfa-enrollment.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { auth } from '~/services/firebase';
 import {
   PhoneAuthProvider,
@@ -34,7 +34,7 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
   const [verificationCode, setVerificationCode] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [codeSent, setCodeSent] = useState(false);
-  const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
+  const recaptchaVerifierRef = useRef<RecaptchaVerifier | null>(null);
   const [verificationId, setVerificationId] = useState('');
   const [resendTimer, setResendTimer] = useState(0);
   const [isClient, setIsClient] = useState(false);
@@ -46,8 +46,8 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
 
   useEffect(() => {
     if (!isClient) return;
-    
-    // Initialize reCAPTCHA verifier
+
+    // Initialize reCAPTCHA verifier only after the container element is in the DOM
     const verifier = new RecaptchaVerifier(auth, 'recaptcha-container-enrollment', {
       size: 'invisible',
       callback: () => {
@@ -59,12 +59,13 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
         onError(error);
       }
     });
-    setRecaptchaVerifier(verifier);
+    recaptchaVerifierRef.current = verifier;
 
     return () => {
       verifier.clear();
+      recaptchaVerifierRef.current = null;
     };
-  }, [onError, isClient]);
+  }, [isClient, onError]);
 
   useEffect(() => {
     if (resendTimer > 0) {
@@ -129,7 +130,8 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
       return;
     }
 
-    if (!recaptchaVerifier) {
+    const captchaVerifier = recaptchaVerifierRef.current;
+    if (!captchaVerifier) {
       const error = getValidationError('MFA_RECAPTCHA_ERROR');
       setErrorMessage(error);
       onError(error);
@@ -151,7 +153,7 @@ export const MFAEnrollment: React.FC<MFAEnrollmentProps> = ({
       const phoneAuthProvider = new PhoneAuthProvider(auth);
       const verificationId = await phoneAuthProvider.verifyPhoneNumber(
         phoneInfoOptions,
-        recaptchaVerifier
+        captchaVerifier
       );
 
       setVerificationId(verificationId);

package/app/components/auth/mfa-verification.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { 
   PhoneAuthProvider, 
   PhoneMultiFactorGenerator, 
@@ -36,7 +36,7 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
   const [verificationId, setVerificationId] = useState('');
   const [loading, setLoading] = useState(false);
   const [codeSent, setCodeSent] = useState(false);
-  const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
+  const recaptchaVerifierRef = useRef<RecaptchaVerifier | null>(null);
   const [isClient, setIsClient] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
@@ -52,8 +52,8 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
       (h) => h.factorId === PhoneMultiFactorGenerator.FACTOR_ID
     );
     if (!hasPhoneHint) return;
-    
-    // Initialize reCAPTCHA verifier
+
+    // Initialize reCAPTCHA verifier only after the container element is in the DOM
     const verifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
       size: 'invisible',
       callback: () => {
@@ -65,15 +65,17 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
         onError(error);
       }
     });
-    setRecaptchaVerifier(verifier);
+    recaptchaVerifierRef.current = verifier;
 
     return () => {
       verifier.clear();
+      recaptchaVerifierRef.current = null;
     };
   }, [isClient, onError, resolver.hints]);
 
   const sendVerificationCode = async () => {
-    if (!recaptchaVerifier) {
+    const captchaVerifier = recaptchaVerifierRef.current;
+    if (!captchaVerifier) {
       const error = getValidationError('MFA_RECAPTCHA_ERROR');
       setErrorMessage(error);
       onError(error);
@@ -90,7 +92,7 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
         session: resolver.session
       };
 
-      const vId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
+      const vId = await phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, captchaVerifier);
       setVerificationId(vId);
       setCodeSent(true);
     } catch (error: unknown) {
@@ -102,9 +104,7 @@ export const MFAVerification = ({ resolver, onSuccess, onError, onCancel }: MFAV
       }
       setErrorMessage(errorMsg);
       onError(errorMsg);
-      if (recaptchaVerifier) {
-        recaptchaVerifier.clear();
-      }
+      recaptchaVerifierRef.current?.clear();
     } finally {
       setLoading(false);
     }

package/app/components/navbar/case-modals/all-cases-modal.tsx

@@ -24,6 +24,7 @@ import {
   getConfirmationSummaryDocument,
   getUserCases,
   getUserReadOnlyCases,
+  type UserConfirmationSummaryDocument,
 } from '~/utils/data';
 import { fetchFiles } from '~/components/actions/image-manage';
 import styles from './all-cases-modal.module.css';
@@ -35,6 +36,7 @@ interface CasesModalProps {
   currentCase: string;
   user: User;
   confirmationSaveVersion?: number;
+  initialConfirmationSummary?: UserConfirmationSummaryDocument;
 }
 
 interface CaseConfirmationStatus {
@@ -64,7 +66,8 @@ export const CasesModal = ({
   onSelectCase,
   currentCase,
   user,
-  confirmationSaveVersion = 0
+  confirmationSaveVersion = 0,
+  initialConfirmationSummary,
 }: CasesModalProps) => {
   const [allCases, setAllCases] = useState<CasesModalCaseItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -96,73 +99,74 @@ export const CasesModal = ({
   });
   const [caseConfirmationStatus, setCaseConfirmationStatus] = useState<CaseConfirmationStatus>({});
   const caseConfirmationStatusRef = useRef<CaseConfirmationStatus>({});
-
-  const loadCases = useCallback(async () => {
-    try {
-      const [ownedCases, readOnlyCases] = await Promise.all([
-        getUserCases(user),
-        getUserReadOnlyCases(user),
-      ]);
-
-      const ownedCaseEntries = await Promise.all(
-        ownedCases.map(async (entry) => {
-          const caseData = await getCaseData(user, entry.caseNumber).catch(() => null);
-
-          return {
-            caseNumber: entry.caseNumber,
-            createdAt: entry.createdAt,
-            archived: caseData?.archived === true,
-            isReadOnly: false,
-          } as CasesModalCaseItem;
-        })
-      );
-
-      const readOnlyEntries: CasesModalCaseItem[] = readOnlyCases.map((entry) => ({
-        caseNumber: entry.caseNumber,
-        createdAt: entry.importedAt,
-        archived: false,
-        isReadOnly: true,
-      }));
-
-      const mergedCasesMap = new Map<string, CasesModalCaseItem>();
-      [...ownedCaseEntries, ...readOnlyEntries].forEach((entry) => {
-        if (!mergedCasesMap.has(entry.caseNumber)) {
-          mergedCasesMap.set(entry.caseNumber, entry);
-        }
-      });
-
-      setAllCases(Array.from(mergedCasesMap.values()));
-      setSelectedCaseNumber((previous) => previous ?? (currentCase || null));
-    } catch (err) {
-      console.error('Failed to load cases:', err);
-      setError('Failed to load cases');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [user, currentCase]);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     caseConfirmationStatusRef.current = caseConfirmationStatus;
   }, [caseConfirmationStatus]);
 
-  const startLoading = () => {
-    setIsLoading(true);
-    setError('');
-  };
-
   useEffect(() => {
-    if (isOpen) {
-      const loadingTimer = window.setTimeout(() => {
-        startLoading();
-      }, 0);
+    if (!isOpen) return;
 
-      void loadCases();
+    let isCancelled = false;
 
-      return () => {
-        window.clearTimeout(loadingTimer);
-      };
-    }
-  }, [isOpen, loadCases]);
+    const load = async () => {
+      setIsLoading(true);
+      setError('');
+
+      try {
+        const [ownedCases, readOnlyCases] = await Promise.all([
+          getUserCases(user),
+          getUserReadOnlyCases(user),
+        ]);
+
+        const ownedCaseEntries = await Promise.all(
+          ownedCases.map(async (entry) => {
+            const caseData = await getCaseData(user, entry.caseNumber).catch(() => null);
+
+            return {
+              caseNumber: entry.caseNumber,
+              createdAt: entry.createdAt,
+              archived: caseData?.archived === true,
+              isReadOnly: false,
+            } as CasesModalCaseItem;
+          })
+        );
+
+        const readOnlyEntries: CasesModalCaseItem[] = readOnlyCases.map((entry) => ({
+          caseNumber: entry.caseNumber,
+          createdAt: entry.importedAt,
+          archived: false,
+          isReadOnly: true,
+        }));
+
+        const mergedCasesMap = new Map<string, CasesModalCaseItem>();
+        [...ownedCaseEntries, ...readOnlyEntries].forEach((entry) => {
+          if (!mergedCasesMap.has(entry.caseNumber)) {
+            mergedCasesMap.set(entry.caseNumber, entry);
+          }
+        });
+
+        if (!isCancelled) {
+          setAllCases(Array.from(mergedCasesMap.values()));
+          setSelectedCaseNumber((previous) => previous ?? (currentCase || null));
+          setIsLoading(false);
+        }
+      } catch (err) {
+        console.error('Failed to load cases:', err);
+        if (!isCancelled) {
+          setError('Failed to load cases');
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isOpen, user, currentCase, refreshKey]);
 
   const archiveScopedCases = useMemo(() => {
     if (preferences.showArchivedOnly) {
@@ -191,16 +195,11 @@ export const CasesModal = ({
   );
 
   const totalPages = Math.max(1, Math.ceil(visibleCases.length / CASES_PER_PAGE));
-
-  useEffect(() => {
-    if (currentPage > totalPages - 1) {
-      setCurrentPage(totalPages - 1);
-    }
-  }, [currentPage, totalPages]);
+  const effectiveCurrentPage = Math.min(currentPage, totalPages - 1);
 
   const paginatedCases = visibleCases.slice(
-    currentPage * CASES_PER_PAGE,
-    (currentPage + 1) * CASES_PER_PAGE
+    effectiveCurrentPage * CASES_PER_PAGE,
+    (effectiveCurrentPage + 1) * CASES_PER_PAGE
   );
 
   const hasCustomPreferences =
@@ -213,6 +212,9 @@ export const CasesModal = ({
     [allCases, selectedCaseNumber]
   );
 
+  // Derived from the memo — naturally null when the selected case no longer exists in allCases.
+  const effectiveSelectedCaseNumber = selectedCase?.caseNumber ?? null;
+
   const canRenameSelectedCase = Boolean(
     selectedCase && !selectedCase.archived && !selectedCase.isReadOnly
   );
@@ -233,31 +235,7 @@ export const CasesModal = ({
         ? 'Read-only review cases cannot be deleted. Use Clear RO Case under Case Management first.'
         : undefined;
 
-  useEffect(() => {
-    setCurrentPage(0);
-  }, [preferences.sortBy, preferences.confirmationFilter, preferences.showArchivedOnly]);
-
-  useEffect(() => {
-    if (paginatedCases.length === 0) {
-      setFocusedIndex(0);
-      return;
-    }
-
-    if (focusedIndex > paginatedCases.length - 1) {
-      setFocusedIndex(paginatedCases.length - 1);
-    }
-  }, [paginatedCases, focusedIndex]);
-
-  useEffect(() => {
-    if (!selectedCaseNumber) {
-      return;
-    }
-
-    const exists = allCases.some((entry) => entry.caseNumber === selectedCaseNumber);
-    if (!exists) {
-      setSelectedCaseNumber(null);
-    }
-  }, [allCases, selectedCaseNumber]);
+  const effectiveFocusedIndex = paginatedCases.length === 0 ? 0 : Math.min(focusedIndex, paginatedCases.length - 1);
 
   const hydrateCaseConfirmationStatuses = useCallback(async (caseNumbers: string[]) => {
     const missingCaseNumbers = caseNumbers.filter(
@@ -313,10 +291,16 @@ export const CasesModal = ({
         return;
       }
 
-      const summary = await getConfirmationSummaryDocument(user).catch((err) => {
-        console.error('Failed to load confirmation summary:', err);
-        return null;
-      });
+      // Use the pre-fetched summary if available and no confirmation saves have
+      // been made since case load (confirmationSaveVersion === 0). When saves
+      // have occurred the summary may be stale, so re-fetch from the data worker.
+      const summary =
+        initialConfirmationSummary && confirmationSaveVersion === 0
+          ? initialConfirmationSummary
+          : await getConfirmationSummaryDocument(user).catch((err) => {
+              console.error('Failed to load confirmation summary:', err);
+              return null;
+            });
 
       if (!summary || isCancelled) {
         return;
@@ -338,7 +322,7 @@ export const CasesModal = ({
     return () => {
       isCancelled = true;
     };
-  }, [isOpen, user, confirmationSaveVersion]);
+  }, [isOpen, user, confirmationSaveVersion, initialConfirmationSummary]);
 
   useEffect(() => {
     if (!isOpen || paginatedCases.length === 0) {
@@ -367,11 +351,11 @@ export const CasesModal = ({
   };
 
   const handleOpenSelectedCase = () => {
-    if (!selectedCaseNumber) {
+    if (!effectiveSelectedCaseNumber) {
       return;
     }
 
-    onSelectCase(selectedCaseNumber);
+    onSelectCase(effectiveSelectedCaseNumber);
     requestClose();
   };
 
@@ -419,7 +403,6 @@ export const CasesModal = ({
 
     try {
       await renameCase(user, selectedCase.caseNumber, nextCaseNumber);
-      await loadCases();
       setSelectedCaseNumber(nextCaseNumber);
       setIsRenameModalOpen(false);
 
@@ -427,6 +410,7 @@ export const CasesModal = ({
         onSelectCase(nextCaseNumber);
       }
 
+      setRefreshKey((k) => k + 1);
       setActionNotice({
         type: 'success',
         message: `Case renamed to ${nextCaseNumber}.`,
@@ -468,13 +452,13 @@ export const CasesModal = ({
 
     try {
       await archiveCase(user, selectedCase.caseNumber, archiveReason);
-      await loadCases();
       setIsArchiveModalOpen(false);
 
       if (selectedCase.caseNumber === currentCase) {
         onSelectCase(selectedCase.caseNumber);
       }
 
+      setRefreshKey((k) => k + 1);
       setActionNotice({
         type: 'success',
         message: 'Case archived successfully.',
@@ -523,9 +507,9 @@ export const CasesModal = ({
 
     try {
       const deleteResult = await deleteCase(user, selectedCase.caseNumber);
-      await loadCases();
       setSelectedCaseNumber(null);
       setIsDeleteModalOpen(false);
+      setRefreshKey((k) => k + 1);
 
       if (deleteResult.missingImages.length > 0) {
         setActionNotice({
@@ -693,7 +677,7 @@ export const CasesModal = ({
                   {paginatedCases.map((caseEntry, index) => {
                     const caseNum = caseEntry.caseNumber;
                     const confirmationStatus = caseConfirmationStatus[caseNum] || DEFAULT_CONFIRMATION_STATUS;
-                    const isSelected = selectedCaseNumber === caseNum;
+                    const isSelected = effectiveSelectedCaseNumber === caseNum;
                     const confirmationLabel = confirmationStatus.includeConfirmation
                       ? confirmationStatus.isConfirmed
                         ? 'Confirmed'
@@ -716,7 +700,7 @@ export const CasesModal = ({
                           }}
                           role="option"
                           aria-selected={isSelected}
-                          tabIndex={focusedIndex === index ? 0 : -1}
+                          tabIndex={effectiveFocusedIndex === index ? 0 : -1}
                           className={`${styles.caseItem} ${isSelected ? styles.active : ''}`}
                           onClick={() => handleSelectCase(caseNum, index)}
                           onFocus={() => setFocusedIndex(index)}
@@ -806,7 +790,7 @@ export const CasesModal = ({
             type="button"
             className={styles.openSelectedButton}
             onClick={handleOpenSelectedCase}
-            disabled={!selectedCaseNumber || isRunningAction}
+            disabled={!effectiveSelectedCaseNumber || isRunningAction}
           >
             {isRunningAction ? 'Working...' : 'Open Selected Case'}
           </button>
@@ -815,14 +799,14 @@ export const CasesModal = ({
             <div className={styles.pagination}>
               <button
                 onClick={() => setCurrentPage(p => p - 1)}
-                disabled={currentPage === 0}
+                disabled={effectiveCurrentPage === 0}
               >
                 Previous
               </button>
-              <span>{currentPage + 1} of {totalPages} ({visibleCases.length} filtered cases)</span>
+              <span>{effectiveCurrentPage + 1} of {totalPages} ({visibleCases.length} filtered cases)</span>
               <button
                 onClick={() => setCurrentPage(p => p + 1)}
-                disabled={currentPage === totalPages - 1}
+                disabled={effectiveCurrentPage === totalPages - 1}
               >
                 Next
               </button>

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

@@ -5,7 +5,6 @@ import styles from './cases.module.css';
 import { FilesModal } from '../files/files-modal';
 import { ImageUploadZone } from '../upload/image-upload-zone';
 import {
-  fetchFiles,
   deleteFile,
 } from '../../actions/image-manage';
 import { 
@@ -13,7 +12,8 @@ import {
   ensureCaseConfirmationSummary,
   getCaseConfirmationSummary,
   getNotesViewPermission,
-  getNotesButtonTooltip
+  getNotesButtonTooltip,
+  type UserConfirmationSummaryDocument
 } from '~/utils/data';
 import { type FileData } from '~/types';
 
@@ -36,6 +36,7 @@ interface CaseSidebarProps {
   onUploadStatusChange?: (isUploading: boolean) => void;
   onUploadComplete?: (result: { successCount: number; failedFiles: string[] }) => void;
   onOpenCaseExport?: () => void;
+  initialConfirmationSummary?: UserConfirmationSummaryDocument;
 }
 
 export const CaseSidebar = ({ 
@@ -56,7 +57,8 @@ export const CaseSidebar = ({
   isUploading = false,
   onUploadStatusChange,
   onUploadComplete,
-  onOpenCaseExport
+  onOpenCaseExport,
+  initialConfirmationSummary,
 }: CaseSidebarProps) => {
   
   const [, setFileError] = useState('');
@@ -97,25 +99,35 @@ export const CaseSidebar = ({
     }
   }, [currentCase, files.length, user]);
 
-  // Check file upload permissions when currentCase or files change
+  // Check file upload permissions when currentCase or files change.
   useEffect(() => {
-    checkFileUploadPermissions();
-  }, [checkFileUploadPermissions]);
+    let isCancelled = false;
+    const check = async () => {
+      if (currentCase) {
+        try {
+          const permission = await canUploadFile(user, files.length);
+          if (!isCancelled) {
+            setCanUploadNewFile(permission.canUpload);
+            setUploadFileError(permission.reason || '');
+          }
+        } catch (error) {
+          console.error('Error checking file upload permission:', error);
+          if (!isCancelled) {
+            setCanUploadNewFile(false);
+            setUploadFileError('Unable to verify upload permissions');
+          }
+        }
+      } else if (!isCancelled) {
+        setCanUploadNewFile(true);
+        setUploadFileError('');
+      }
+    };
+    void check();
+    return () => {
+      isCancelled = true;
+    };
+  }, [currentCase, files.length, user]);
    
-  useEffect(() => {
-    if (currentCase) {
-      fetchFiles(user, currentCase, { skipValidation: true })
-        .then(loadedFiles => {
-          setFiles(loadedFiles);
-        })
-        .catch(err => {
-          console.error('Failed to load files:', err);
-          setFileError(err instanceof Error ? err.message : 'Failed to load files');
-        });
-    } else {
-      setFiles([]);
-    }
-  }, [user, currentCase, setFiles]);
 
   // Fetch confirmation status for all files when case/files change
   useEffect(() => {
@@ -130,7 +142,12 @@ export const CaseSidebar = ({
         return;
       }
 
-      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((error) => {
+      const caseSummary = await ensureCaseConfirmationSummary(
+        user,
+        currentCase,
+        files,
+        confirmationSaveVersion === 0 ? { prefetchedSummary: initialConfirmationSummary } : undefined
+      ).catch((error) => {
         console.error(`Error fetching confirmation summary for case ${currentCase}:`, error);
         return null;
       });
@@ -155,7 +172,7 @@ export const CaseSidebar = ({
     return () => {
       isCancelled = true;
     };
-  }, [currentCase, fileIdsKey, user, files]);
+  }, [currentCase, fileIdsKey, user, files, initialConfirmationSummary, confirmationSaveVersion]);
 
   // Refresh only selected file confirmation status after confirmation-related data is persisted
   useEffect(() => {
@@ -283,6 +300,7 @@ return (
         isReadOnly={isReadOnly}
         selectedFileId={selectedFileId}
         confirmationSaveVersion={confirmationSaveVersion}
+        initialConfirmationSummary={initialConfirmationSummary}
       />
       
         <div className={styles.filesSection}>

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

@@ -16,6 +16,7 @@ import { deleteFile } from '~/components/actions/image-manage';
 import {
   ensureCaseConfirmationSummary,
   type FileConfirmationSummary,
+  type UserConfirmationSummaryDocument,
 } from '~/utils/data';
 import { type FileData } from '~/types';
 import { DeleteFilesModal } from './delete-files-modal';
@@ -31,6 +32,7 @@ interface FilesModalProps {
   isReadOnly?: boolean;
   selectedFileId?: string;
   confirmationSaveVersion?: number;
+  initialConfirmationSummary?: UserConfirmationSummaryDocument;
 }
 
 interface ActionNotice {
@@ -99,6 +101,7 @@ export const FilesModal = ({
   isReadOnly = false,
   selectedFileId,
   confirmationSaveVersion = 0,
+  initialConfirmationSummary,
 }: FilesModalProps) => {
   const { user } = useContext(AuthContext);
   const [currentPage, setCurrentPage] = useState(0);
@@ -190,6 +193,7 @@ export const FilesModal = ({
 
       const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files, {
         forceRefresh: shouldForceItemTypeSummaryRefresh,
+        prefetchedSummary: confirmationSaveVersion === 0 ? initialConfirmationSummary : undefined,
       }).catch((err) => {
         console.error(`Error fetching confirmation summary for case ${currentCase}:`, err);
         return null;
@@ -214,6 +218,7 @@ export const FilesModal = ({
     user,
     confirmationSaveVersion,
     shouldForceItemTypeSummaryRefresh,
+    initialConfirmationSummary,
   ]);
 
   const toggleDeleteSelection = (fileId: string) => {

package/app/components/sidebar/sidebar-container.tsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 import { Sidebar } from './sidebar';
 import type { User } from 'firebase/auth';
 import { type FileData } from '~/types';
+import { type UserConfirmationSummaryDocument } from '~/utils/data';
 import styles from './sidebar.module.css';
 import { getAppVersion } from '~/utils/common';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
@@ -30,6 +31,7 @@ interface SidebarContainerProps {
   isUploading?: boolean;
   onUploadStatusChange?: (isUploading: boolean) => void;
   onOpenCaseExport?: () => void;
+  initialConfirmationSummary?: UserConfirmationSummaryDocument;
 }
 
 export const SidebarContainer: React.FC<SidebarContainerProps> = (props) => {