@striae-org/striae 3.2.1 → 3.3.0

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

@@ -1,8 +1,8 @@
 import { useState, useCallback } from 'react';
-import { User } from 'firebase/auth';
-import { previewCaseImport } from '~/components/actions/case-review';
-import { CaseImportPreview } from '~/types';
-import { ConfirmationPreview } from '../components/ConfirmationPreviewSection';
+import type { User } from 'firebase/auth';
+import { previewCaseImport, extractConfirmationImportPackage } from '~/components/actions/case-review';
+import { type CaseImportPreview } from '~/types';
+import { type ConfirmationPreview } from '../components/ConfirmationPreviewSection';
 
 type UnknownRecord = Record<string, unknown>;
 
@@ -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/hooks/useImportExecution.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { importCaseForReview, importConfirmationData } from '~/components/actions/case-review';
-import { ImportResult, ConfirmationImportResult } from '~/types';
+import { type ImportResult, type ConfirmationImportResult } from '~/types';
 
 interface ProgressState {
   stage: string;

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

@@ -1,9 +1,11 @@
-import { User } from 'firebase/auth';
+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, ExportFormat } from '../case-export/case-export';
+import { CaseExport, type ExportFormat } from '../case-export/case-export';
 import { ImageUploadZone } from '../upload/image-upload-zone';
 import { UserAuditViewer } from '~/components/audit/user-audit-viewer';
 import {
@@ -27,7 +29,7 @@ import {
   getUserData
 } from '~/utils/permissions';
 import { getFileAnnotations } from '~/utils/data-operations';
-import { FileData, CaseActionType } from '~/types';
+import { type FileData, type CaseActionType } from '~/types';
 
 interface CaseSidebarProps {
   user: User;
@@ -57,7 +59,7 @@ interface CaseSidebarProps {
 
 const SUCCESS_MESSAGE_TIMEOUT = 3000;
 
-type CaseExportActionsModule = typeof import('../../actions/case-export');
+type CaseExportActionsModule = typeof CaseExportActions;
 
 let caseExportActionsPromise: Promise<CaseExportActionsModule> | null = null;
 
@@ -102,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('');
@@ -312,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);
@@ -335,6 +359,7 @@ export const CaseSidebar = ({
         setFiles(files);
         setCaseNumber('');
         setSuccessAction('loaded');
+        setShowCaseManagement(false);
         setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
         return;
       }
@@ -361,6 +386,7 @@ export const CaseSidebar = ({
       setFiles([]);
       setCaseNumber('');
       setSuccessAction('created');
+      setShowCaseManagement(false);
       setTimeout(() => setSuccessAction(null), SUCCESS_MESSAGE_TIMEOUT);
       
       // Refresh permissions after successful case creation
@@ -563,53 +589,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)}
@@ -829,6 +875,16 @@ return (
       />
       
       </div>
-    </div>
+    <Toast
+      message={toastMessage}
+      type={toastType}
+      isVisible={isToastVisible}
+      onClose={() => {
+        setIsToastVisible(false);
+        setError('');
+        setSuccessAction(null);
+      }}
+    />
+    </>
   );
 };

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { listCases } from '~/components/actions/case-manage';
 import { getFileAnnotations } from '~/utils/data-operations';
 import { fetchFiles } from '~/components/actions/image-manage';

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;
+}

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

@@ -1,8 +1,9 @@
-import React, { useState, useContext, useEffect } from 'react';
+import type React from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { AuthContext } from '~/contexts/auth.context';
 import { deleteFile } from '~/components/actions/image-manage';
 import { getFileAnnotations } from '~/utils/data-operations';
-import { FileData } from '~/types';
+import { type FileData } from '~/types';
 import styles from './files-modal.module.css';
 
 interface FilesModalProps {

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

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { ColorSelector } from '~/components/colors/colors';
 import { NotesModal } from './notes-modal';
 import { getNotes, saveNotes } from '~/components/actions/notes-manage';
-import { AnnotationData } from '~/types/annotations';
+import { type AnnotationData } from '~/types/annotations';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/annotation-timestamp';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import styles from './notes.module.css';
 
 interface NotesSidebarProps {

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

@@ -10,12 +10,12 @@ hr {
 }
 
 .section {
-  margin-bottom: 2rem;  
+  margin-bottom: 2rem;
 }
 
 .sectionTitle {
   font-size: 1.3rem;
-  font-weight: 600;  
+  font-weight: 600;
   color: #495057;
   margin-bottom: 1rem;
 }
@@ -50,7 +50,7 @@ input[type="color"]:focus,
 textarea: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);
 }
 
 .caseNumbers {
@@ -74,10 +74,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.caseInput input:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .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);
 }
 
 .checkboxLabel {
@@ -108,6 +112,11 @@ textarea:focus {
   transition: border-color 0.2s;
 }
 
+.classCharacteristics input:not(:disabled),
+.classCharacteristics textarea:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .classCharacteristics select,
 .support select {
   width: 100%;
@@ -124,7 +133,7 @@ textarea:focus {
 .support select: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);
 }
 
 .classCharacteristics textarea {
@@ -138,11 +147,14 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.classCharacteristics input + textarea {
+  margin-top: 1rem;
+}
+
 .classCharacteristics textarea:focus {
   outline: none;
   border-color: #0d6efd;
-  box-shadow: 0 0 0 2px rgba(13,110,253,.25);
-  margin-top: 1rem;
+  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
   resize: vertical;
 }
 
@@ -188,13 +200,17 @@ textarea:focus {
   box-sizing: border-box;
 }
 
+.indexing input[type="text"]:not(:disabled) {
+  background-color: #ffffff;
+}
+
 .indexing input[type="text"]: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);
 }
 
-.confirmation {  
+.confirmation {
   padding: 0.75rem;
   background-color: #f8f9fa;
   border-radius: 6px;
@@ -232,7 +248,7 @@ textarea:focus {
 }
 
 .notesButton:hover {
-  background-color: color-mix(in lab, var(--primary) 95%, transparent);  
+  background-color: color-mix(in lab, var(--primary) 95%, transparent);
 }
 
 .modalOverlay {
@@ -355,6 +371,10 @@ textarea:focus {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}