@striae-org/striae 3.2.2 → 4.0.0

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

@@ -19,7 +19,7 @@ import {
   useFilePreview,
   useImportExecution,
   isValidImportFile,
-  getImportType,
+  resolveImportType,
   resetFileInput
 } from './index';
 import styles from './case-import.module.css';
@@ -146,12 +146,18 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only ZIP files (case imports) or JSON files (confirmation imports) are allowed. Please select a valid file.');
+      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      clearImportData();
+      return;
+    }
+
+    const importType = await resolveImportType(file);
+    if (!importType) {
+      setError('The selected file is not a supported Striae case or confirmation import package.');
       clearImportData();
       return;
     }
 
-    const importType = getImportType(file);
     updateImportState({ 
       selectedFile: file, 
       importType 
@@ -172,12 +178,18 @@ export const CaseImport = ({
     clearMessages();
 
     if (!isValidImportFile(file)) {
-      setError('Only ZIP files (case imports) or JSON files (confirmation imports) are allowed. Please select a valid file.');
+      setError('Only Striae case ZIP files, confirmation ZIP files, or confirmation JSON files are allowed.');
+      clearImportData();
+      return;
+    }
+
+    const importType = await resolveImportType(file);
+    if (!importType) {
+      setError('The selected file is not a supported Striae case or confirmation import package.');
       clearImportData();
       return;
     }
 
-    const importType = getImportType(file);
     updateImportState({ 
       selectedFile: file, 
       importType 
@@ -404,7 +416,7 @@ export const CaseImport = ({
               <br />
               <h3 className={styles.instructionsTitle}>Confirmation Import Instructions:</h3>
               <ul className={styles.instructionsList}>
-                <li>Only JSON files (.json) with confirmation data exported from Striae are accepted</li>
+                <li>Confirmation imports accept either confirmation JSON files or confirmation ZIP packages exported from Striae</li>
                 <li>Only one confirmation file can be imported at a time</li>
                 <li>Confirmed images will become read-only and cannot be modified</li>
                 <li>If an image has a pre-existing confirmation, it will be skipped</li>

package/app/components/sidebar/case-import/hooks/useFilePreview.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import type { User } from 'firebase/auth';
-import { previewCaseImport } from '~/components/actions/case-review';
+import { previewCaseImport, extractConfirmationImportPackage } from '~/components/actions/case-review';
 import { type CaseImportPreview } from '~/types';
 import { type ConfirmationPreview } from '../components/ConfirmationPreviewSection';
 
@@ -56,8 +56,8 @@ export const useFilePreview = (
 
     setIsLoadingPreview(true);
     try {
-      const text = await file.text();
-      const parsed = JSON.parse(text) as unknown;
+      const { confirmationData } = await extractConfirmationImportPackage(file);
+      const parsed = confirmationData as unknown;
 
       if (!isRecord(parsed)) {
         throw new Error('Invalid confirmation data format');
@@ -104,7 +104,9 @@ export const useFilePreview = (
       setConfirmationPreview(preview);
     } catch (error) {
       console.error('Error loading confirmation preview:', error);
-      setError(`Failed to read confirmation data: ${error instanceof Error ? error.message : 'Invalid JSON format'}`);
+      setError(
+        `Failed to read confirmation data: ${error instanceof Error ? error.message : 'Invalid confirmation package format'}`
+      );
       clearImportData();
     } finally {
       setIsLoadingPreview(false);

package/app/components/sidebar/case-import/utils/file-validation.ts

@@ -1,5 +1,14 @@
 import { isConfirmationDataFile } from '~/components/actions/case-review';
 
+const CASE_EXPORT_DATA_FILE_REGEX = /_data\.(json|csv)$/i;
+const CONFIRMATION_EXPORT_FILE_REGEX = /^confirmation-data-.*\.json$/i;
+const FORENSIC_MANIFEST_FILE_NAME = 'forensic_manifest.json';
+
+function getLeafFileName(path: string): string {
+  const segments = path.split('/').filter(Boolean);
+  return segments.length > 0 ? segments[segments.length - 1] : path;
+}
+
 /**
  * Check if a file is a valid ZIP file
  */
@@ -13,8 +22,10 @@ export const isValidZipFile = (file: File): boolean => {
  * Check if a file is a valid confirmation JSON file
  */
 export const isValidConfirmationFile = (file: File): boolean => {
-  return file.type === 'application/json' && 
-         isConfirmationDataFile(file.name);
+  const lowerName = file.name.toLowerCase();
+  const jsonType = file.type === 'application/json' || file.type === '';
+
+  return lowerName.endsWith('.json') && jsonType && isConfirmationDataFile(file.name);
 };
 
 /**
@@ -33,6 +44,50 @@ export const getImportType = (file: File): 'case' | 'confirmation' | null => {
   return null;
 };
 
+/**
+ * Resolve import type, including ZIP package inspection.
+ * Case ZIPs are identified by case data files or FORENSIC_MANIFEST.json.
+ * Confirmation ZIPs are identified by confirmation-data-*.json.
+ */
+export const resolveImportType = async (file: File): Promise<'case' | 'confirmation' | null> => {
+  if (isValidConfirmationFile(file)) {
+    return 'confirmation';
+  }
+
+  if (!isValidZipFile(file)) {
+    return null;
+  }
+
+  try {
+    const JSZip = (await import('jszip')).default;
+    const zip = await JSZip.loadAsync(file);
+    const fileEntries = Object.keys(zip.files).filter((path) => !zip.files[path].dir);
+
+    const hasCaseData = fileEntries.some((path) =>
+      CASE_EXPORT_DATA_FILE_REGEX.test(getLeafFileName(path))
+    );
+    const hasManifest = fileEntries.some(
+      (path) => getLeafFileName(path).toLowerCase() === FORENSIC_MANIFEST_FILE_NAME
+    );
+
+    if (hasCaseData || hasManifest) {
+      return 'case';
+    }
+
+    const hasConfirmationData = fileEntries.some((path) =>
+      CONFIRMATION_EXPORT_FILE_REGEX.test(getLeafFileName(path))
+    );
+
+    if (hasConfirmationData) {
+      return 'confirmation';
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+};
+
 /**
  * Reset file input element
  */

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

@@ -2,6 +2,7 @@ import type { User } from 'firebase/auth';
 import type * as CaseExportActions from '../../actions/case-export';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './cases.module.css';
+import { Toast } from '~/components/toast/toast';
 import { CasesModal } from './cases-modal';
 import { FilesModal } from '../files/files-modal';
 import { CaseExport, type ExportFormat } from '../case-export/case-export';
@@ -103,7 +104,11 @@ export const CaseSidebar = ({
   const [, setFileError] = useState('');
   const [newCaseName, setNewCaseName] = useState('');
   const [showCaseActions, setShowCaseActions] = useState(false);
+  const [showCaseManagement, setShowCaseManagement] = useState(false);
   const [canCreateNewCase, setCanCreateNewCase] = useState(true);
+  const [isToastVisible, setIsToastVisible] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastType, setToastType] = useState<'success' | 'error' | 'warning'>('success');
   const [canUploadNewFile, setCanUploadNewFile] = useState(true);
   const [createCaseError, setCreateCaseError] = useState('');
   const [uploadFileError, setUploadFileError] = useState('');
@@ -313,6 +318,24 @@ export const CaseSidebar = ({
       isCancelled = true;
     };
   }, [currentCase, fileIdsKey, user, selectedFileId, confirmationSaveVersion, files.length, calculateCaseConfirmationStatus]);
+
+  useEffect(() => {
+    if (error) {
+      setToastMessage(error);
+      setToastType('error');
+      setIsToastVisible(true);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (successAction) {
+      setToastMessage(`Case ${currentCase} ${successAction} successfully!`);
+      setToastType('success');
+      setIsToastVisible(true);
+    }
+    // currentCase intentionally omitted: we capture its value at the time successAction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [successAction]);
   
   const handleCase = async () => {
     setIsLoading(true);
@@ -336,6 +359,7 @@ export const CaseSidebar = ({
         setFiles(files);
         setCaseNumber('');
         setSuccessAction('loaded');
+        setShowCaseManagement(false);
         setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
         return;
       }
@@ -362,6 +386,7 @@ export const CaseSidebar = ({
       setFiles([]);
       setCaseNumber('');
       setSuccessAction('created');
+      setShowCaseManagement(false);
       setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
       
       // Refresh permissions after successful case creation
@@ -514,25 +539,40 @@ const handleImageSelect = (file: FileData) => {
     ? 'Select an image first'
     : undefined;
 
-  const handleExport = async (exportCaseNumber: string, format: ExportFormat, includeImages?: boolean) => {
+  const handleExport = async (exportCaseNumber: string, format: ExportFormat, includeImages?: boolean, onProgress?: (progress: number, label: string) => void) => {
     try {
       const caseExportActions = await loadCaseExportActions();
 
       if (includeImages) {
         // ZIP export with images - only available for single case exports
-        await caseExportActions.downloadCaseAsZip(user, exportCaseNumber, format);
+        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);
+        });
       } else {
         // Standard data-only export
-        const exportData = await caseExportActions.exportCaseData(user, exportCaseNumber, {
-          includeMetadata: true
-        });
-        
+        onProgress?.(5, 'Loading case data');
+        const exportData = await caseExportActions.exportCaseData(
+          user,
+          exportCaseNumber,
+          { includeMetadata: true },
+          (current, total, label) => {
+            const p = total > 0 ? Math.round(10 + (current / total) * 60) : 10;
+            onProgress?.(p, label);
+          }
+        );
+        onProgress?.(75, 'Preparing download');
+
         // Download the exported data in the selected format
         if (format === 'json') {
           await caseExportActions.downloadCaseAsJSON(user, exportData);
         } else {
           await caseExportActions.downloadCaseAsCSV(user, exportData);
         }
+        onProgress?.(100, 'Complete');
       }
       
     } catch (error) {
@@ -564,53 +604,73 @@ const handleImageSelect = (file: FileData) => {
   };
 
 return (
+    <>
     <div className={styles.caseSection}>
-     <div className={styles.caseSection}>
-        <h4>Case Management</h4>
-        {limitsDescription && (
-          <p className={styles.limitsInfo}>
-            {limitsDescription}
-          </p>
-        )}
-        <div className={`${styles.caseInput} mb-4`}>
-          <input
-            type="text"
-            value={caseNumber}
-            onChange={(e) => setCaseNumber(e.target.value)}
-            placeholder="Case #"
-          />
-          </div>
+        {currentCase && !showCaseManagement ? (
           <div className={`${styles.caseLoad} mb-4`}>
-          <button
-        onClick={handleCase}
-        disabled={isLoading || !caseNumber || permissionChecking || (isReadOnly && !!currentCase) || isUploading}
-        title={
-          isUploading
-            ? "Cannot load/create cases while uploading files"
-            : (isReadOnly && currentCase)
-            ? "Cannot load/create cases while reviewing a read-only case. Clear the current case first." 
-            : (!canCreateNewCase ? createCaseError : undefined)
-        }
-      >
-            {isLoading ? 'Loading...' : permissionChecking ? 'Checking permissions...' : 'Load/Create Case'}
-      </button>      
-      </div>
-      <div className={styles.caseInput}>            
-      <button 
-            onClick={() => setIsModalOpen(true)}
-            className={styles.listButton}
-            disabled={isUploading}
-            title={isUploading ? "Cannot list cases while uploading files" : undefined}
-          >
-            List All Cases
-          </button>
-    </div>
-    {error && <p className={styles.error}>{error}</p>}
-    {successAction && (
-      <p className={styles.success}>
-        Case {currentCase} {successAction} successfully!
-      </p>
-    )}  
+            <button
+              className={styles.switchCaseButton}
+              onClick={() => setShowCaseManagement(true)}
+              disabled={isUploading}
+              title={isUploading ? "Cannot switch cases while uploading files" : undefined}
+            >
+              Switch Case
+            </button>
+          </div>
+        ) : (
+          <>
+            <h4>Case Management</h4>
+            {limitsDescription && (
+              <p className={styles.limitsInfo}>
+                {limitsDescription}
+              </p>
+            )}
+            <div className={`${styles.caseInput} mb-4`}>
+              <input
+                type="text"
+                value={caseNumber}
+                onChange={(e) => setCaseNumber(e.target.value)}
+                placeholder="Case #"
+              />
+            </div>
+            <div className={`${styles.caseLoad} mb-4`}>
+              <button
+                onClick={handleCase}
+                disabled={isLoading || !caseNumber || permissionChecking || (isReadOnly && !!currentCase) || isUploading}
+                title={
+                  isUploading
+                    ? "Cannot load/create cases while uploading files"
+                    : (isReadOnly && currentCase)
+                    ? "Cannot load/create cases while reviewing a read-only case. Clear the current case first."
+                    : (!canCreateNewCase ? createCaseError : undefined)
+                }
+              >
+                {isLoading ? 'Loading...' : permissionChecking ? 'Checking permissions...' : 'Load/Create Case'}
+              </button>
+            </div>
+            <div className={styles.caseInput}>
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className={styles.listButton}
+                disabled={isUploading}
+                title={isUploading ? "Cannot list cases while uploading files" : undefined}
+              >
+                List All Cases
+              </button>
+            </div>
+            {currentCase && (
+              <div className="mb-4">
+                <button
+                  className={styles.cancelSwitchButton}
+                  onClick={() => setShowCaseManagement(false)}
+                  disabled={isUploading}
+                >
+                  Cancel
+                </button>
+              </div>
+            )}
+          </>
+        )}
     <CasesModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -830,6 +890,16 @@ return (
       />
       
       </div>
-    </div>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={isToastVisible}
+      onClose={() => {
+        setIsToastVisible(false);
+        setError('');
+        setSuccessAction(null);
+      }}
+    />
+    </>
   );
 };

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

@@ -50,7 +50,7 @@
 .caseInput input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 /* Buttons */
@@ -126,7 +126,7 @@
   background-color: #0d6efd;
   color: white;
   border: none;
-  border-radius: 6px;  
+  border-radius: 6px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
@@ -174,7 +174,7 @@
   padding: 0.5rem;
   border-radius: 4px;
   color: #198754;
-  background-color: rgba(25,135,84,0.1);
+  background-color: rgba(25, 135, 84, 0.1);
 }
 
 /* Files Section */
@@ -182,7 +182,7 @@
   margin-top: 2rem;
 }
 
-.filesSection h4 {  
+.filesSection h4 {
   margin-bottom: 1rem;
   font-size: 1.3rem;
   font-weight: 900;
@@ -274,8 +274,6 @@
   background-color: #dee2e6;
 }
 
-
-
 /* Files and Case Management */
 
 .fileName {
@@ -285,7 +283,6 @@
   white-space: nowrap;
 }
 
-
 /* Rename and Delete Cases */
 
 .caseRename {
@@ -307,12 +304,12 @@
 .caseRename input:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
 }
 
 /* Buttons */
 .caseRename button {
-   width: 100%;
+  width: 100%;
   padding: 0.75rem;
   background-color: #ffc107;
   color: #000;
@@ -681,33 +678,119 @@
 }
 /* Confirmation Status Indicators */
 .fileItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemNotConfirmed {
-  background-color: color-mix(in lab, var(--warning) 15%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 15%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemNotConfirmed:hover {
-  background-color: color-mix(in lab, var(--warning) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--warning) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemConfirmed {
-  background-color: color-mix(in lab, var(--success) 20%, var(--backgroundLight));
+  background-color: color-mix(
+    in lab,
+    var(--success) 20%,
+    var(--backgroundLight)
+  );
 }
 
 .fileItem.active.fileItemConfirmed:hover {
-  background-color: color-mix(in lab, var(--success) 28%, var(--backgroundLight));
-}
+  background-color: color-mix(
+    in lab,
+    var(--success) 28%,
+    var(--backgroundLight)
+  );
+}
+
+/* Switch/Cancel Case buttons */
+.switchCaseButton {
+  width: 100%;
+  padding: 0.75rem;
+  background-color: #198754;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-top: 0.5rem;
+  box-sizing: border-box;
+}
+
+.switchCaseButton:hover:not(:disabled) {
+  background-color: #105032;
+}
+
+.switchCaseButton:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cancelSwitchButton {
+  width: 100%;
+  padding: 0.75rem;
+  margin-top: 0.75rem;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.cancelSwitchButton:hover:not(:disabled) {
+  background-color: #bd2130;
+}
+
+.cancelSwitchButton:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cancelSwitchButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}