@striae-org/striae 5.2.1 → 5.3.1

package/app/components/audit/viewer/audit-viewer-header.tsx

@@ -2,50 +2,17 @@ import styles from '../user-audit.module.css';
 
 interface AuditViewerHeaderProps {
   title: string;
-  hasEntries: boolean;
-  onExportCSV: () => void;
-  onExportJSON: () => void;
-  onGenerateReport: () => void;
   onClose: () => void;
 }
 
 export const AuditViewerHeader = ({
   title,
-  hasEntries,
-  onExportCSV,
-  onExportJSON,
-  onGenerateReport,
   onClose,
 }: AuditViewerHeaderProps) => {
   return (
     <div className={styles.header}>
       <h2 className={styles.title}>{title}</h2>
       <div className={styles.headerActions}>
-        {hasEntries && (
-          <div className={styles.exportButtons}>
-            <button
-              onClick={onExportCSV}
-              className={styles.exportButton}
-              title="CSV - Individual entry log with summary data"
-            >
-              📊 CSV
-            </button>
-            <button
-              onClick={onExportJSON}
-              className={styles.exportButton}
-              title="JSON - Complete log data for version capture and auditing"
-            >
-              📄 JSON
-            </button>
-            <button
-              onClick={onGenerateReport}
-              className={styles.exportButton}
-              title="Summary report only"
-            >
-              📋 Report
-            </button>
-          </div>
-        )}
         <button className={styles.closeButton} onClick={onClose}>
           ×
         </button>

package/app/components/navbar/case-modals/archive-case-modal.tsx

@@ -82,7 +82,7 @@ export const ArchiveCaseModal = ({
             Archiving a case permanently renders it read-only.
           </p>
           <p>
-            The archive will be in JSON format and include all images.
+            The archive will be packaged as an encrypted case package and will always include all images.
           </p>
           <p>
             The full audit trail is packaged with Striae&apos;s current public key and forensic signatures.

package/app/components/navbar/case-modals/export-case-modal.module.css

@@ -0,0 +1,27 @@
+.modal {
+  width: min(480px, calc(100vw - 2rem));
+}
+
+.description {
+  margin: 0 0 0.9rem;
+  color: #4b5563;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.confirmButton {
+  background: #1f6feb;
+  color: #ffffff;
+  border-color: #1560d4;
+}
+
+.confirmButton:not(:disabled):hover {
+  background: #1560d4;
+}
+
+.emailError {
+  margin: 0.45rem 0 0;
+  color: #b91c1c;
+  font-size: 0.83rem;
+  line-height: 1.4;
+}

package/app/components/navbar/case-modals/export-case-modal.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './export-case-modal.module.css';
+
+interface ExportCaseModalProps {
+  isOpen: boolean;
+  caseNumber: string;
+  currentUserEmail?: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: (designatedReviewerEmail: string | undefined) => Promise<void>;
+}
+
+export const ExportCaseModal = ({
+  isOpen,
+  caseNumber,
+  currentUserEmail,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: ExportCaseModalProps) => {
+  const [email, setEmail] = useState<string>('');
+
+  const isSelfEmail =
+    email.trim().length > 0 &&
+    !!currentUserEmail &&
+    email.trim().toLowerCase() === currentUserEmail.toLowerCase();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    setEmail('');
+    onClose();
+  };
+
+  const isSubmitDisabled = isSubmitting || isSelfEmail;
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isSubmitting,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    const trimmed = email.trim() || undefined;
+    await onSubmit(trimmed);
+    setEmail('');
+  };
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close export case dialog"
+      {...overlayProps}
+    >
+      <div
+        className={`${sharedStyles.modal} ${styles.modal}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Export Case"
+      >
+        <button {...getCloseButtonProps({ ariaLabel: 'Close export case dialog' })}>
+          ×
+        </button>
+        <h3 className={sharedStyles.title}>Export Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        <p className={styles.description}>
+          You may designate a specific email address for review approval. Only the user
+          with the supplied email address will be able to open your case for review in
+          Striae. (Optional)
+        </p>
+        <input
+          ref={inputRef}
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          className={sharedStyles.input}
+          placeholder="Reviewer email address (optional)"
+          disabled={isSubmitting}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !isSubmitDisabled) {
+              void handleSubmit();
+            }
+          }}
+        />
+        {isSelfEmail && (
+          <p className={styles.emailError}>
+            You cannot designate yourself as the reviewer. The recipient must be a different Striae user.
+          </p>
+        )}
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={() => void handleSubmit()}
+            disabled={isSubmitDisabled}
+          >
+            {isSubmitting ? 'Exporting...' : 'Export Case'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/navbar/case-modals/export-confirmations-modal.module.css

@@ -0,0 +1,24 @@
+.modal {
+  width: min(400px, calc(100vw - 2rem));
+}
+
+.warningPanel {
+  margin-bottom: 0.8rem;
+}
+
+.description {
+  margin: 0 0 0.3rem;
+  color: #4b5563;
+  font-size: 0.86rem;
+  line-height: 1.5;
+}
+
+.confirmButton {
+  background: #1f6feb;
+  color: #ffffff;
+  border-color: #1560d4;
+}
+
+.confirmButton:not(:disabled):hover {
+  background: #1560d4;
+}

package/app/components/navbar/case-modals/export-confirmations-modal.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './export-confirmations-modal.module.css';
+
+interface ExportConfirmationsModalProps {
+  isOpen: boolean;
+  caseNumber: string;
+  confirmedCount: number;
+  unconfirmedCount: number;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export const ExportConfirmationsModal = ({
+  isOpen,
+  caseNumber,
+  confirmedCount,
+  unconfirmedCount,
+  isSubmitting = false,
+  onClose,
+  onConfirm,
+}: ExportConfirmationsModalProps) => {
+  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isSubmitting,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const focusId = window.requestAnimationFrame(() => {
+      confirmButtonRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const confirmationLabel = confirmedCount === 1 ? '1 confirmation' : `${confirmedCount} confirmations`;
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close export confirmations dialog"
+      {...overlayProps}
+    >
+      <div
+        className={`${sharedStyles.modal} ${styles.modal}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Export Confirmations"
+      >
+        <button {...getCloseButtonProps({ ariaLabel: 'Close export confirmations dialog' })}>
+          ×
+        </button>
+        <h3 className={sharedStyles.title}>Export Confirmations</h3>
+        <p className={sharedStyles.subtitle}>Case: {caseNumber}</p>
+        {unconfirmedCount > 0 && (
+          <div className={`${sharedStyles.warningPanel} ${styles.warningPanel}`}>
+            <p>
+              <strong>
+                {unconfirmedCount} image{unconfirmedCount !== 1 ? 's' : ''}{' '}
+                {unconfirmedCount !== 1 ? 'are' : 'is'} unconfirmed.
+              </strong>
+            </p>
+            <p>Only confirmed images will be included in this export.</p>
+          </div>
+        )}
+        <p className={styles.description}>
+          {confirmedCount === 0
+            ? 'No confirmed images found for this case.'
+            : `${confirmationLabel} will be exported.`}
+        </p>
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isSubmitting}
+          >
+            Cancel
+          </button>
+          <button
+            ref={confirmButtonRef}
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={onConfirm}
+            disabled={isSubmitting || confirmedCount === 0}
+          >
+            {isSubmitting ? 'Exporting...' : 'Export Confirmations'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/navbar/navbar.tsx

@@ -194,7 +194,7 @@ export const Navbar = ({
                     setIsCaseMenuOpen(false);
                   }}
                 >
-                  Export Case Data
+                  {isReadOnly ? 'Export Confirmations' : 'Export Case Package'}
                 </button>
                 <button
                   type="button"

package/app/components/sidebar/case-import/case-import.module.css

@@ -461,6 +461,41 @@
   padding: var(--spaceM);
 }
 
+.previewMeta {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.previewMetaRow {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  gap: var(--spaceS);
+  font-size: var(--fontSizeBodyS);
+}
+
+.previewMetaLabel {
+  color: var(--textLight);
+}
+
+.previewMetaValue {
+  color: var(--textBody);
+  font-weight: var(--fontWeightMedium);
+  word-break: break-word;
+}
+
+.previewValidBadge {
+  color: var(--success);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.previewInvalidBadge {
+  color: var(--error);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}
+
 /* Confirmation Dialog */
 .confirmationOverlay {
   position: fixed;

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

@@ -11,6 +11,21 @@ interface CasePreviewSectionProps {
   isArchivedRegularCaseImportBlocked?: boolean;
 }
 
+function formatDate(isoDate: string | undefined): string {
+  if (!isoDate) return 'Unknown';
+
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) {
+    return isoDate;
+  }
+
+  return date.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
 export const CasePreviewSection = ({
   casePreview,
   isLoadingPreview,
@@ -31,9 +46,42 @@ export const CasePreviewSection = ({
   return (
     <div className={styles.previewSection}>
       <h3 className={styles.previewTitle}>Case Import Preview</h3>
-      <p className={styles.previewMessage}>
-        Case package detected. Details are hidden until import verification completes.
-      </p>
+      <div className={styles.previewMeta}>
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Case</span>
+            <span className={styles.previewMetaValue}>{casePreview.caseNumber}</span>
+          </div>
+          {(casePreview.exportedByName ?? casePreview.exportedBy) && (
+            <div className={styles.previewMetaRow}>
+              <span className={styles.previewMetaLabel}>Exported by</span>
+              <span className={styles.previewMetaValue}>
+                {casePreview.exportedByName ?? casePreview.exportedBy}
+              </span>
+            </div>
+          )}
+          {casePreview.exportedByCompany && (
+            <div className={styles.previewMetaRow}>
+              <span className={styles.previewMetaLabel}>Organization</span>
+              <span className={styles.previewMetaValue}>{casePreview.exportedByCompany}</span>
+            </div>
+          )}
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Exported</span>
+            <span className={styles.previewMetaValue}>{formatDate(casePreview.exportDate)}</span>
+          </div>
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Files</span>
+            <span className={styles.previewMetaValue}>{casePreview.totalFiles}</span>
+          </div>
+          {casePreview.hashValid !== undefined && (
+            <div className={styles.previewMetaRow}>
+              <span className={styles.previewMetaLabel}>Integrity</span>
+              <span className={casePreview.hashValid ? styles.previewValidBadge : styles.previewInvalidBadge}>
+                {casePreview.hashValid ? 'Passed' : 'Failed'}
+              </span>
+            </div>
+          )}
+        </div>
       {casePreview.archived && (
         <div className={styles.archivedImportNote}>
           {ARCHIVED_SELF_IMPORT_NOTE}

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

@@ -24,6 +24,7 @@ export const ConfirmationDialog = ({
 }: ConfirmationDialogProps) => {
   if (!showConfirmation || !casePreview) return null;
 
+  const isEncrypted = casePreview.caseNumber === 'ENCRYPTED';
   const hasDetails = casePreview.archived || isArchivedRegularCaseImportBlocked;
 
   return (
@@ -32,10 +33,7 @@ export const ConfirmationDialog = ({
         <div className={styles.confirmationContent}>
           <h3 className={styles.confirmationTitle}>Confirm Case Import</h3>
           <p className={styles.confirmationText}>
-            Are you sure you want to import this case for review?
-          </p>
-          <p className={styles.confirmationText}>
-            Package details stay hidden until verification completes.
+            Are you sure you want to import{isEncrypted ? ' this encrypted case' : ` case ${casePreview.caseNumber}`} for review?
           </p>
 
           {hasDetails && (

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

@@ -1,9 +1,15 @@
+import { type ConfirmationImportPreview } from '~/types';
 import styles from '../case-import.module.css';
 
-export type ConfirmationPreview = Record<string, never>;
+function formatDate(isoDate: string | undefined): string {
+  if (!isoDate) return 'Unknown';
+  const date = new Date(isoDate);
+  if (Number.isNaN(date.getTime())) return isoDate;
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
 
 interface ConfirmationPreviewSectionProps {
-  confirmationPreview: ConfirmationPreview | null;
+  confirmationPreview: ConfirmationImportPreview | null;
   isLoadingPreview: boolean;
 }
 
@@ -23,9 +29,34 @@ export const ConfirmationPreviewSection = ({ confirmationPreview, isLoadingPrevi
   return (
     <div className={styles.previewSection}>
       <h3 className={styles.previewTitle}>Confirmation Import Preview</h3>
-      <p className={styles.previewMessage}>
-        Confirmation package detected. Details are hidden until import verification completes.
-      </p>
+      <div className={styles.previewMeta}>
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Case</span>
+          <span className={styles.previewMetaValue}>{confirmationPreview.caseNumber}</span>
+        </div>
+        {(confirmationPreview.exportedByName || confirmationPreview.exportedBy) && (
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Exported by</span>
+            <span className={styles.previewMetaValue}>
+              {confirmationPreview.exportedByName || confirmationPreview.exportedBy}
+            </span>
+          </div>
+        )}
+        {confirmationPreview.exportedByCompany && (
+          <div className={styles.previewMetaRow}>
+            <span className={styles.previewMetaLabel}>Organization</span>
+            <span className={styles.previewMetaValue}>{confirmationPreview.exportedByCompany}</span>
+          </div>
+        )}
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Exported</span>
+          <span className={styles.previewMetaValue}>{formatDate(confirmationPreview.exportDate)}</span>
+        </div>
+        <div className={styles.previewMetaRow}>
+          <span className={styles.previewMetaLabel}>Confirmations</span>
+          <span className={styles.previewMetaValue}>{confirmationPreview.totalConfirmations}</span>
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -1,12 +1,11 @@
 import { useState, useCallback } from 'react';
 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';
+import { previewCaseImport, previewConfirmationImport } from '~/components/actions/case-review';
+import { type CaseImportPreview, type ConfirmationImportPreview } from '~/types';
 
 interface UseFilePreviewReturn {
   casePreview: CaseImportPreview | null;
-  confirmationPreview: ConfirmationPreview | null;
+  confirmationPreview: ConfirmationImportPreview | null;
   loadCasePreview: (file: File) => Promise<void>;
   loadConfirmationPreview: (file: File) => Promise<void>;
   clearPreviews: () => void;
@@ -22,7 +21,7 @@ export const useFilePreview = (
   clearImportData: () => void
 ): UseFilePreviewReturn => {
   const [casePreview, setCasePreview] = useState<CaseImportPreview | null>(null);
-  const [confirmationPreview, setConfirmationPreview] = useState<ConfirmationPreview | null>(null);
+  const [confirmationPreview, setConfirmationPreview] = useState<ConfirmationImportPreview | null>(null);
 
   const loadCasePreview = useCallback(async (file: File) => {
     if (!user) {
@@ -51,10 +50,7 @@ export const useFilePreview = (
 
     setIsLoadingPreview(true);
     try {
-      await extractConfirmationImportPackage(file);
-
-      const preview: ConfirmationPreview = {};
-      
+      const preview = await previewConfirmationImport(file, user);
       setConfirmationPreview(preview);
     } catch (error) {
       console.error('Error loading confirmation preview:', error);

package/app/components/sidebar/case-import/index.ts

@@ -12,7 +12,4 @@ export { useFilePreview } from './hooks/useFilePreview';
 export { useImportExecution } from './hooks/useImportExecution';
 
 // Utils
-export * from './utils/file-validation';
-
-// Types
-export type { ConfirmationPreview } from './components/ConfirmationPreviewSection';
+export * from './utils/file-validation';

package/app/components/sidebar/notes/class-details-shared.ts

@@ -89,10 +89,10 @@ export const SHOTSHELL_BUCKSHOT_OPTIONS = [
 
 export const ALL_CALIBERS: string[] = [...PISTOL_CALIBERS, ...RIFLE_CALIBERS];
 export const BULLET_JACKET_METAL_OPTIONS = ['Cu', 'Brass', 'Ni-plated', 'Al', 'Steel', 'None'] as const;
-export const BULLET_CORE_METAL_OPTIONS = ['Pb', 'Steel'] as const;
+export const BULLET_CORE_METAL_OPTIONS = ['Pb', 'Steel', 'Solid Cu', 'Frangible'] as const;
 export const BULLET_TYPE_OPTIONS = ['FMJ', 'TMJ', 'HP', 'WC'] as const;
 export const BULLET_BARREL_TYPE_OPTIONS = ['Conventional', 'Polygonal'] as const;
-export const CARTRIDGE_METAL_OPTIONS = ['Brass', 'Ni-plated', 'Al', 'Steel'] as const;
+export const CARTRIDGE_METAL_OPTIONS = ['Brass', 'Ni-plated', 'Al', 'Steel', 'Bi-metal'] as const;
 export const CARTRIDGE_PRIMER_TYPE_OPTIONS = ['CF', 'RF'] as const;
 export const CARTRIDGE_FPI_SHAPE_OPTIONS = ['Circular', 'Elliptical', 'Rectangular/Square', 'Tear-drop'] as const;
 export const CARTRIDGE_APERTURE_SHAPE_OPTIONS = ['Circular', 'Rectangular'] as const;

package/app/components/toast/toast.module.css

@@ -90,11 +90,47 @@
   font-size: 14px;
 }
 
+.toast.loading {
+  background: var(--backgroundLight);
+  border-color: var(--primary);
+  box-shadow: 0 8px 32px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.toast.loading .icon {
+  color: var(--primary);
+  background: color-mix(in lab, var(--primary) 15%, transparent);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .icon {
   font-weight: bold;
   flex-shrink: 0;
 }
 
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .message {
   flex: 1;
   font-size: 16px;