@striae-org/striae 4.2.0 → 4.3.0

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

@@ -13,6 +13,7 @@ import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 interface SidebarContainerProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageId?: string;
   currentCase: string;
   files: FileData[];
@@ -23,6 +24,7 @@ interface SidebarContainerProps {
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;

package/app/components/sidebar/sidebar.tsx

@@ -1,4 +1,5 @@
 import type { User } from 'firebase/auth';
+import type React from 'react';
 import { useState, useCallback } from 'react';
 import styles from './sidebar.module.css';
 import { CaseSidebar } from './cases/case-sidebar';
@@ -8,6 +9,7 @@ import { type FileData } from '~/types';
 interface SidebarProps {
   user: User;
   onImageSelect: (file: FileData) => void;
+  onOpenCase: () => void;
   imageId?: string;
   currentCase: string;
   files: FileData[];
@@ -18,6 +20,7 @@ interface SidebarProps {
   setShowNotes: (show: boolean) => void;
   onAnnotationRefresh?: () => void;
   isReadOnly?: boolean;
+  isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
   isUploading?: boolean;
@@ -27,6 +30,7 @@ interface SidebarProps {
 export const Sidebar = ({ 
   user, 
   onImageSelect,
+  onOpenCase,
   imageId, 
   currentCase,
   imageLoaded,
@@ -35,6 +39,7 @@ export const Sidebar = ({
   setFiles,
   setShowNotes,
   isReadOnly = false,
+  isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
   isUploading: initialIsUploading = false,
@@ -67,13 +72,20 @@ export const Sidebar = ({
       setToastMessage(`${result.successCount} file${result.successCount !== 1 ? 's' : ''} uploaded!`);
     }
     setIsToastVisible(true);
-  }, []);  
+  }, []);
+
+  const handleExportNotification = useCallback((message: string, type: 'success' | 'error') => {
+    setToastType(type);
+    setToastMessage(message);
+    setIsToastVisible(true);
+  }, []);
 
   return (
     <div className={styles.sidebar}>
       <CaseSidebar 
         user={user} 
         onImageSelect={onImageSelect}
+        onOpenCase={onOpenCase}
         currentCase={currentCase}
         imageLoaded={imageLoaded}
         setImageLoaded={setImageLoaded}
@@ -81,12 +93,14 @@ export const Sidebar = ({
         setFiles={setFiles}
         onNotesClick={() => setShowNotes(true)}
         isReadOnly={isReadOnly}
+        isArchivedCase={isArchivedCase}
         isConfirmed={isConfirmed}
         confirmationSaveVersion={confirmationSaveVersion}
         selectedFileId={imageId}
         isUploading={isUploading}
         onUploadStatusChange={handleUploadStatusChange}
         onUploadComplete={handleUploadComplete}
+        onExportNotification={handleExportNotification}
       />
       <Toast 
         message={toastMessage}

package/app/{tailwind.css → global.css}

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "modern-normalize";
 
 @layer base {
   :root {

package/app/hooks/useCaseListPreferences.ts

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import {
+  type CasesModalPreferences,
+  type CasesModalSortBy,
+  type CasesModalConfirmationFilter,
+} from '~/utils/data/case-filters';
+
+const CASES_MODAL_PREFERENCES_STORAGE_KEY = 'striae.casesModal.preferences';
+
+export const DEFAULT_CASES_MODAL_PREFERENCES: CasesModalPreferences = {
+  sortBy: 'recent',
+  confirmationFilter: 'all',
+  showArchivedOnly: false,
+};
+
+function parseStoredPreferences(value: string | null): CasesModalPreferences {
+  if (!value) {
+    return DEFAULT_CASES_MODAL_PREFERENCES;
+  }
+
+  try {
+    const parsed = JSON.parse(value) as Partial<CasesModalPreferences>;
+
+    const sortBy: CasesModalSortBy =
+      parsed.sortBy === 'alphabetical' || parsed.sortBy === 'recent'
+        ? parsed.sortBy
+        : DEFAULT_CASES_MODAL_PREFERENCES.sortBy;
+
+    const confirmationFilter: CasesModalConfirmationFilter =
+      parsed.confirmationFilter === 'pending' ||
+      parsed.confirmationFilter === 'confirmed' ||
+      parsed.confirmationFilter === 'none-requested' ||
+      parsed.confirmationFilter === 'all'
+        ? parsed.confirmationFilter
+        : DEFAULT_CASES_MODAL_PREFERENCES.confirmationFilter;
+
+    const showArchivedOnly =
+      typeof parsed.showArchivedOnly === 'boolean'
+        ? parsed.showArchivedOnly
+        : DEFAULT_CASES_MODAL_PREFERENCES.showArchivedOnly;
+
+    return {
+      sortBy,
+      confirmationFilter,
+      showArchivedOnly,
+    };
+  } catch {
+    return DEFAULT_CASES_MODAL_PREFERENCES;
+  }
+}
+
+function loadCasesModalPreferences(): CasesModalPreferences {
+  if (typeof window === 'undefined') {
+    return DEFAULT_CASES_MODAL_PREFERENCES;
+  }
+
+  return parseStoredPreferences(window.localStorage.getItem(CASES_MODAL_PREFERENCES_STORAGE_KEY));
+}
+
+export function useCaseListPreferences() {
+  const [preferences, setPreferences] = useState<CasesModalPreferences>(() =>
+    loadCasesModalPreferences()
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(
+      CASES_MODAL_PREFERENCES_STORAGE_KEY,
+      JSON.stringify(preferences)
+    );
+  }, [preferences]);
+
+  const setSortBy = (sortBy: CasesModalSortBy) => {
+    setPreferences((current) => ({ ...current, sortBy }));
+  };
+
+  const setConfirmationFilter = (confirmationFilter: CasesModalConfirmationFilter) => {
+    setPreferences((current) => ({ ...current, confirmationFilter }));
+  };
+
+  const setShowArchivedOnly = (showArchivedOnly: boolean) => {
+    setPreferences((current) => ({ ...current, showArchivedOnly }));
+  };
+
+  const resetPreferences = () => {
+    setPreferences(DEFAULT_CASES_MODAL_PREFERENCES);
+  };
+
+  return {
+    preferences,
+    setSortBy,
+    setConfirmationFilter,
+    setShowArchivedOnly,
+    resetPreferences,
+  };
+}

package/app/hooks/useFileListPreferences.ts

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import {
+  type FilesModalPreferences,
+  type FilesModalSortBy,
+  type FilesModalConfirmationFilter,
+  type FilesModalClassTypeFilter,
+} from '~/utils/data/file-filters';
+
+const FILES_MODAL_PREFERENCES_STORAGE_KEY = 'striae.filesModal.preferences';
+
+export const DEFAULT_FILES_MODAL_PREFERENCES: FilesModalPreferences = {
+  sortBy: 'recent',
+  confirmationFilter: 'all',
+  classTypeFilter: 'all',
+};
+
+function parseStoredPreferences(value: string | null): FilesModalPreferences {
+  if (!value) {
+    return DEFAULT_FILES_MODAL_PREFERENCES;
+  }
+
+  try {
+    const parsed = JSON.parse(value) as Partial<FilesModalPreferences>;
+
+    const sortBy: FilesModalSortBy =
+      parsed.sortBy === 'filename' ||
+      parsed.sortBy === 'confirmation' ||
+      parsed.sortBy === 'classType' ||
+      parsed.sortBy === 'recent'
+        ? parsed.sortBy
+        : DEFAULT_FILES_MODAL_PREFERENCES.sortBy;
+
+    const confirmationFilter: FilesModalConfirmationFilter =
+      parsed.confirmationFilter === 'pending' ||
+      parsed.confirmationFilter === 'confirmed' ||
+      parsed.confirmationFilter === 'none-requested' ||
+      parsed.confirmationFilter === 'all'
+        ? parsed.confirmationFilter
+        : DEFAULT_FILES_MODAL_PREFERENCES.confirmationFilter;
+
+    const classTypeFilter: FilesModalClassTypeFilter =
+      parsed.classTypeFilter === 'Bullet' ||
+      parsed.classTypeFilter === 'Cartridge Case' ||
+      parsed.classTypeFilter === 'Shotshell' ||
+      parsed.classTypeFilter === 'Other' ||
+      parsed.classTypeFilter === 'all'
+        ? parsed.classTypeFilter
+        : parsed.classTypeFilter === 'unset'
+          ? 'Other'
+        : DEFAULT_FILES_MODAL_PREFERENCES.classTypeFilter;
+
+    return {
+      sortBy,
+      confirmationFilter,
+      classTypeFilter,
+    };
+  } catch {
+    return DEFAULT_FILES_MODAL_PREFERENCES;
+  }
+}
+
+function loadFilesModalPreferences(): FilesModalPreferences {
+  if (typeof window === 'undefined') {
+    return DEFAULT_FILES_MODAL_PREFERENCES;
+  }
+
+  return parseStoredPreferences(window.localStorage.getItem(FILES_MODAL_PREFERENCES_STORAGE_KEY));
+}
+
+export function useFileListPreferences() {
+  const [preferences, setPreferences] = useState<FilesModalPreferences>(() =>
+    loadFilesModalPreferences()
+  );
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(FILES_MODAL_PREFERENCES_STORAGE_KEY, JSON.stringify(preferences));
+  }, [preferences]);
+
+  const setSortBy = (sortBy: FilesModalSortBy) => {
+    setPreferences((current) => ({ ...current, sortBy }));
+  };
+
+  const setConfirmationFilter = (confirmationFilter: FilesModalConfirmationFilter) => {
+    setPreferences((current) => ({ ...current, confirmationFilter }));
+  };
+
+  const setClassTypeFilter = (classTypeFilter: FilesModalClassTypeFilter) => {
+    setPreferences((current) => ({ ...current, classTypeFilter }));
+  };
+
+  const resetPreferences = () => {
+    setPreferences(DEFAULT_FILES_MODAL_PREFERENCES);
+  };
+
+  return {
+    preferences,
+    setSortBy,
+    setConfirmationFilter,
+    setClassTypeFilter,
+    resetPreferences,
+  };
+}

package/app/hooks/useOverlayDismiss.ts

@@ -85,11 +85,13 @@ export const useOverlayDismiss = ({
     }
   }, [closeOnBackdrop, requestClose]);
 
+  const isBackdropDismissInteractive = closeOnBackdrop && canDismiss;
+
   const overlayProps = {
-    role: 'button' as const,
-    tabIndex: 0,
-    onMouseDown: handleOverlayMouseDown,
-    onKeyDown: handleOverlayKeyDown,
+    role: isBackdropDismissInteractive ? 'button' : 'presentation',
+    tabIndex: isBackdropDismissInteractive ? 0 : undefined,
+    onMouseDown: isBackdropDismissInteractive ? handleOverlayMouseDown : undefined,
+    onKeyDown: isBackdropDismissInteractive ? handleOverlayKeyDown : undefined,
     style: { cursor: 'default' as const },
   };
 

package/app/root.tsx

@@ -16,7 +16,7 @@ import {
 import { AuthProvider } from '~/components/auth/auth-provider';
 import { auth } from '~/services/firebase';
 import styles from '~/styles/root.module.css';
-import './tailwind.css';
+import './global.css';
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

package/app/routes/striae/striae.tsx

@@ -732,6 +732,9 @@ export const Striae = ({ user }: StriaePage) => {
         <SidebarContainer 
           user={user} 
           onImageSelect={handleImageSelect}
+          onOpenCase={() => {
+            void handleOpenCaseModal();
+          }}
           imageId={imageId}
           currentCase={currentCase}
           imageLoaded={imageLoaded}
@@ -742,6 +745,7 @@ export const Striae = ({ user }: StriaePage) => {
           setShowNotes={setShowNotes}
           onAnnotationRefresh={refreshAnnotationData}
           isReadOnly={isReadOnlyCase}
+          isArchivedCase={archiveDetails.archived}
           isConfirmed={!!annotationData?.confirmationData}
           confirmationSaveVersion={confirmationSaveVersion}
           isUploading={isUploading}
@@ -797,6 +801,7 @@ export const Striae = ({ user }: StriaePage) => {
         }}
         currentCase={currentCase || ''}
         user={user}
+        confirmationSaveVersion={confirmationSaveVersion}
       />
       <FilesModal
         isOpen={isFilesModalOpen}
@@ -809,6 +814,7 @@ export const Striae = ({ user }: StriaePage) => {
         setFiles={setFiles}
         isReadOnly={isReadOnlyCase}
         selectedFileId={imageId}
+        confirmationSaveVersion={confirmationSaveVersion}
       />
       <NotesEditorModal
         isOpen={showNotes}
@@ -819,6 +825,7 @@ export const Striae = ({ user }: StriaePage) => {
         onAnnotationRefresh={refreshAnnotationData}
         originalFileName={files.find(file => file.id === imageId)?.originalFilename}
         isUploading={isUploading}
+        showNotification={showNotification}
       />
       <CaseExport
         isOpen={isCaseExportModalOpen}

package/app/services/audit/audit.service.ts

@@ -1067,7 +1067,7 @@ export class AuditService {
 
     const bundledEntries = caseData.bundledAuditTrail?.entries;
     if (!Array.isArray(bundledEntries)) {
-      return [];
+      return null;
     }
 
     const sortedEntries = sortAuditEntriesNewestFirst(bundledEntries);
@@ -1087,7 +1087,7 @@ export class AuditService {
   private async getAuditEntries(params: AuditQueryParams, requestingUser?: User): Promise<ValidationAuditEntry[]> {
     try {
       const bundledArchivedEntries = await this.getBundledArchivedCaseAuditEntries(params, requestingUser);
-      if (bundledArchivedEntries) {
+      if (bundledArchivedEntries !== null) {
         return bundledArchivedEntries;
       }
 

package/app/services/audit/builders/audit-event-builders-case-file.ts

@@ -118,7 +118,7 @@ export const buildCaseArchiveAuditParams = (
     workflowPhase: 'casework',
     caseDetails: {
       newCaseName: input.caseName,
-      deleteReason: input.archiveReason,
+      archiveReason: input.archiveReason,
       totalFiles: input.totalFiles,
       lastModified: archivedAt,
     },

package/app/types/annotations.ts

@@ -22,19 +22,66 @@ export interface ConfirmationData {
   confirmedAt: string;        // ISO timestamp of confirmation
 }
 
+export interface BulletAnnotationData {
+  caliber?: string;
+  mass?: string;
+  diameter?: string;
+  calcDiameter?: string;
+  lgNumber?: number;
+  lgDirection?: string;
+  barrelType?: string;
+  // Width arrays should align with lgNumber:
+  // L1..Ln stored in order at lWidths[0..n-1], G1..Gn at gWidths[0..n-1].
+  lWidths?: string[];
+  gWidths?: string[];
+  jacketMetal?: string;
+  coreMetal?: string;
+  bulletType?: string;
+}
+
+export interface CartridgeCaseAnnotationData {
+  caliber?: string;
+  brand?: string;
+  metal?: string;
+  primerType?: string;
+  fpiShape?: string;
+  apertureShape?: string;
+  hasFpDrag?: boolean;
+  hasExtractorMarks?: boolean;
+  hasEjectorMarks?: boolean;
+  hasChamberMarks?: boolean;
+  hasMagazineLipMarks?: boolean;
+  hasPrimerShear?: boolean;
+  hasEjectionPortMarks?: boolean;
+}
+
+export interface ShotshellAnnotationData {
+  gauge?: string;
+  shotSize?: string;
+  metal?: string;
+  brand?: string;
+  fpiShape?: string;
+  hasExtractorMarks?: boolean;
+  hasEjectorMarks?: boolean;
+  hasChamberMarks?: boolean;
+}
+
 export interface AnnotationData {
   leftCase: string;
   rightCase: string;
   leftItem: string;
   rightItem: string;
   caseFontColor?: string;
-  classType?: 'Bullet' | 'Cartridge Case' | 'Other';
+  classType?: 'Bullet' | 'Cartridge Case' | 'Shotshell' | 'Other';
   customClass?: string;
   classNote?: string;
   indexType?: 'number' | 'color';
   indexNumber?: string;
   indexColor?: string;
   supportLevel?: 'ID' | 'Exclusion' | 'Inconclusive';
+  bulletData?: BulletAnnotationData;
+  cartridgeCaseData?: CartridgeCaseAnnotationData;
+  shotshellData?: ShotshellAnnotationData;
   hasSubclass?: boolean;
   includeConfirmation: boolean;
   confirmationData?: ConfirmationData;

package/app/types/audit.ts

@@ -202,6 +202,7 @@ export interface CaseAuditDetails {
   createdDate?: string;
   lastModified?: string;
   deleteReason?: string;
+  archiveReason?: string;
   backupCreated?: boolean;
 }
 

package/app/utils/data/case-filters.ts

@@ -0,0 +1,127 @@
+export type CasesModalSortBy = 'recent' | 'alphabetical';
+
+export type CasesModalConfirmationFilter =
+  | 'all'
+  | 'pending'
+  | 'confirmed'
+  | 'none-requested';
+
+export interface CasesModalPreferences {
+  sortBy: CasesModalSortBy;
+  confirmationFilter: CasesModalConfirmationFilter;
+  showArchivedOnly: boolean;
+}
+
+export interface CasesModalCaseItem {
+  caseNumber: string;
+  createdAt: string;
+  archived: boolean;
+  isReadOnly: boolean;
+}
+
+export interface CaseConfirmationStatusValue {
+  includeConfirmation: boolean;
+  isConfirmed: boolean;
+}
+
+const DEFAULT_CASE_CONFIRMATION_STATUS: CaseConfirmationStatusValue = {
+  includeConfirmation: false,
+  isConfirmed: false,
+};
+
+function compareCaseNumbersAlphabetically(a: string, b: string): number {
+  const getComponents = (value: string) => {
+    const numbers = value.match(/\d+/g)?.map(Number) || [];
+    const letters = value.match(/[A-Za-z]+/g)?.join('') || '';
+    return { numbers, letters };
+  };
+
+  const left = getComponents(a);
+  const right = getComponents(b);
+
+  const maxLength = Math.max(left.numbers.length, right.numbers.length);
+  for (let index = 0; index < maxLength; index += 1) {
+    const leftNumber = left.numbers[index] || 0;
+    const rightNumber = right.numbers[index] || 0;
+
+    if (leftNumber !== rightNumber) {
+      return leftNumber - rightNumber;
+    }
+  }
+
+  return left.letters.localeCompare(right.letters);
+}
+
+function parseTimestamp(value: string): number {
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function matchesConfirmationFilter(
+  caseNumber: string,
+  confirmationFilter: CasesModalConfirmationFilter,
+  caseConfirmationStatus: Record<string, CaseConfirmationStatusValue>
+): boolean {
+  if (confirmationFilter === 'all') {
+    return true;
+  }
+
+  const status = caseConfirmationStatus[caseNumber] || DEFAULT_CASE_CONFIRMATION_STATUS;
+
+  if (confirmationFilter === 'pending') {
+    return status.includeConfirmation && !status.isConfirmed;
+  }
+
+  if (confirmationFilter === 'confirmed') {
+    return status.includeConfirmation && status.isConfirmed;
+  }
+
+  return !status.includeConfirmation;
+}
+
+export function filterCasesForModal(
+  cases: CasesModalCaseItem[],
+  preferences: CasesModalPreferences,
+  caseConfirmationStatus: Record<string, CaseConfirmationStatusValue>
+): CasesModalCaseItem[] {
+  const archiveFilteredCases = preferences.showArchivedOnly
+    ? cases.filter((entry) => entry.archived && !entry.isReadOnly)
+    : cases.filter((entry) => !entry.archived && !entry.isReadOnly);
+
+  return archiveFilteredCases.filter((entry) =>
+    matchesConfirmationFilter(entry.caseNumber, preferences.confirmationFilter, caseConfirmationStatus)
+  );
+}
+
+export function sortCasesForModal(
+  cases: CasesModalCaseItem[],
+  sortBy: CasesModalSortBy
+): CasesModalCaseItem[] {
+  const next = [...cases];
+
+  if (sortBy === 'recent') {
+    return next.sort((left, right) => {
+      const difference = parseTimestamp(right.createdAt) - parseTimestamp(left.createdAt);
+      if (difference !== 0) {
+        return difference;
+      }
+
+      return compareCaseNumbersAlphabetically(left.caseNumber, right.caseNumber);
+    });
+  }
+
+  return next.sort((left, right) =>
+    compareCaseNumbersAlphabetically(left.caseNumber, right.caseNumber)
+  );
+}
+
+export function getCasesForModal(
+  cases: CasesModalCaseItem[],
+  preferences: CasesModalPreferences,
+  caseConfirmationStatus: Record<string, CaseConfirmationStatusValue>
+): CasesModalCaseItem[] {
+  return sortCasesForModal(
+    filterCasesForModal(cases, preferences, caseConfirmationStatus),
+    preferences.sortBy
+  );
+}