@striae-org/striae 4.2.1 → 4.3.1

package/app/components/actions/case-import/confirmation-import.ts

@@ -1,6 +1,7 @@
 import type { User } from 'firebase/auth';
 import { fetchDataApi } from '~/utils/api';
-import { type ConfirmationImportResult, type ConfirmationImportData } from '~/types';
+import { upsertFileConfirmationSummary } from '~/utils/data';
+import { type AnnotationData, type ConfirmationImportResult, type ConfirmationImportData } from '~/types';
 import { checkExistingCase } from '../case-manage';
 import { extractConfirmationImportPackage } from './confirmation-package';
 import { validateExporterUid, validateConfirmationHash, validateConfirmationSignatureFile } from './validation';
@@ -37,6 +38,7 @@ export async function importConfirmationData(
   let signatureKeyId: string | undefined;
   let confirmationDataForAudit: ConfirmationImportData | null = null;
   let confirmationJsonFileNameForAudit = confirmationFile.name;
+  const confirmedFileNames = new Set<string>();
   
   const result: ConfirmationImportResult = {
     success: false,
@@ -234,6 +236,21 @@ export async function importConfirmationData(
       if (saveResponse.ok) {
         result.imagesUpdated++;
         result.confirmationsImported += confirmations.length;
+        confirmedFileNames.add(displayFilename);
+
+        try {
+          await upsertFileConfirmationSummary(
+            user,
+            result.caseNumber,
+            currentImageId,
+            updatedAnnotationData as AnnotationData
+          );
+        } catch (summaryError) {
+          console.warn(
+            `Failed to update confirmation summary for imported confirmation ${result.caseNumber}/${currentImageId}:`,
+            summaryError
+          );
+        }
         
         // Audit log successful confirmation import
         try {
@@ -298,6 +315,7 @@ export async function importConfirmationData(
       result.success ? (result.errors && result.errors.length > 0 ? 'warning' : 'success') : 'failure',
       hashValid,
       result.confirmationsImported, // Successfully imported confirmations
+      Array.from(confirmedFileNames).sort((left, right) => left.localeCompare(right)),
       result.errors || [],
       confirmationData.metadata.exportedByUid,
       {
@@ -390,6 +408,7 @@ export async function importConfirmationData(
       'failure',
       hashValidForAudit,
       0, // No confirmations successfully imported for failures
+      [],
       result.errors || [],
       reviewingExaminerUidForAudit,
       {

package/app/components/actions/case-import/orchestrator.ts

@@ -286,6 +286,9 @@ export async function importCaseForReview(
     if (existingRegularCase && !isArchivedExport) {
       throw new Error(`Case "${result.caseNumber}" already exists in your case list. You cannot import a case for review if you were the original analyst.`);
     }
+    if (existingRegularCase && isArchivedExport) {
+      throw new Error(`Cannot import this archive because case "${result.caseNumber}" already exists in your case list (active or archived). To import this archive, the existing case must first be deleted.`);
+    }
     
     // Step 2b: Check if read-only case already exists
     const existingCase = await checkReadOnlyCaseExists(user, result.caseNumber);

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

@@ -807,7 +807,11 @@ export const archiveCase = async (
       )
     );
 
-    const auditEntries = await auditService.getAuditEntriesForUser(user.uid, { caseNumber });
+    const auditEntries = await auditService.getAuditEntriesForUser(user.uid, {
+      caseNumber,
+      startDate: caseData.createdAt,
+      endDate: archivedAt,
+    });
     const auditTrail: AuditTrail = {
       caseNumber,
       workflowId: `${caseNumber}-archive-${Date.now()}`,

package/app/components/actions/confirm-export.ts

@@ -5,8 +5,8 @@ import {
   getCurrentPublicSigningKeyDetails,
   getVerificationPublicKey
 } from '~/utils/forensics';
-import { getUserData, getCaseData, updateCaseData, signConfirmationData } from '~/utils/data';
-import { type ConfirmationData, type CaseConfirmations, type CaseDataWithConfirmations, type ConfirmationImportData } from '~/types';
+import { getUserData, getCaseData, updateCaseData, signConfirmationData, upsertFileConfirmationSummary } from '~/utils/data';
+import { type AnnotationData, type ConfirmationData, type CaseConfirmations, type CaseDataWithConfirmations, type ConfirmationImportData } from '~/types';
 import { auditService } from '~/services/audit';
 
 /**
@@ -17,7 +17,8 @@ export async function storeConfirmation(
   caseNumber: string,
   currentImageId: string,
   confirmationData: ConfirmationData,
-  originalImageFileName?: string
+  originalImageFileName?: string,
+  annotationDataForSummary?: AnnotationData
 ): Promise<boolean> {
   const startTime = Date.now();
   let originalImageId: string | undefined; // Declare at function level for error handling
@@ -63,6 +64,14 @@ export async function storeConfirmation(
     // Store the updated case data using centralized function
     await updateCaseData(user, caseNumber, caseData);
 
+    if (annotationDataForSummary) {
+      try {
+        await upsertFileConfirmationSummary(user, caseNumber, currentImageId, annotationDataForSummary);
+      } catch (summaryError) {
+        console.warn(`Failed to update confirmation summary for ${caseNumber}/${currentImageId}:`, summaryError);
+      }
+    }
+
     console.log(`Confirmation stored for original image ${originalImageId}:`, confirmationData);
     
     // Log successful confirmation creation

package/app/components/audit/viewer/audit-entries-list.tsx

@@ -6,6 +6,13 @@ interface AuditEntriesListProps {
   entries: ValidationAuditEntry[];
 }
 
+const isConfirmationImportEntry = (entry: ValidationAuditEntry): boolean => {
+  return (
+    entry.action === 'confirmation-import' ||
+    (entry.action === 'import' && entry.details.workflowPhase === 'confirmation')
+  );
+};
+
 export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
   return (
     <div className={styles.entriesList}>
@@ -47,13 +54,24 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
                 </div>
               )}
 
-              {entry.action === 'confirmation-import' && entry.details.reviewerBadgeId && (
+              {isConfirmationImportEntry(entry) && entry.details.reviewerBadgeId && (
                 <div className={styles.detailRow}>
-                  <span className={styles.detailLabel}>Reviewer Badge/ID:</span>
+                  <span className={styles.detailLabel}>Confirming Examiner Badge/ID:</span>
                   <span className={styles.badgeTag}>{entry.details.reviewerBadgeId}</span>
                 </div>
               )}
 
+              {isConfirmationImportEntry(entry) &&
+                entry.details.caseDetails?.confirmedFileNames &&
+                entry.details.caseDetails.confirmedFileNames.length > 0 && (
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Confirmed Files:</span>
+                    <span className={styles.detailValue}>
+                      {entry.details.caseDetails.confirmedFileNames.join(', ')}
+                    </span>
+                  </div>
+                )}
+
               {entry.result === 'failure' && entry.details.validationErrors.length > 0 && (
                 <div className={styles.detailRow}>
                   <span className={styles.detailLabel}>Error:</span>

package/app/components/audit/viewer/use-audit-viewer-export.ts

@@ -48,7 +48,7 @@ export const useAuditViewerExport = ({
     const filename = auditExportService.generateFilename(
       exportContextData.scopeType,
       exportContextData.identifier,
-      'json'
+      'csv'
     );
 
     try {
@@ -72,7 +72,7 @@ export const useAuditViewerExport = ({
     const filename = auditExportService.generateFilename(
       exportContextData.scopeType,
       exportContextData.identifier,
-      'csv'
+      'json'
     );
 
     try {

package/app/components/audit/viewer/use-audit-viewer-filters.ts

@@ -2,6 +2,10 @@ import { useCallback, useMemo, useState } from 'react';
 import type { AuditAction, AuditResult, ValidationAuditEntry } from '~/types';
 import type { DateRangeFilter } from './types';
 
+const isConfirmationImportEntry = (entry: ValidationAuditEntry): boolean => {
+  return entry.action === 'import' && entry.details.workflowPhase === 'confirmation';
+};
+
 export const useAuditViewerFilters = (caseNumber?: string) => {
   const [filterAction, setFilterAction] = useState<AuditAction | 'all'>('all');
   const [filterResult, setFilterResult] = useState<AuditResult | 'all'>('all');
@@ -76,7 +80,13 @@ export const useAuditViewerFilters = (caseNumber?: string) => {
 
       const resultMatch = filterResult === 'all' || entry.result === filterResult;
       const entryBadgeId = entry.details.userProfileDetails?.badgeId?.trim().toLowerCase() || '';
-      const badgeMatch = normalizedBadgeFilter === '' || entryBadgeId.includes(normalizedBadgeFilter);
+      const reviewerBadgeId = isConfirmationImportEntry(entry)
+        ? entry.details.reviewerBadgeId?.trim().toLowerCase() || ''
+        : '';
+      const badgeMatch =
+        normalizedBadgeFilter === '' ||
+        entryBadgeId.includes(normalizedBadgeFilter) ||
+        reviewerBadgeId.includes(normalizedBadgeFilter);
 
       return actionMatch && resultMatch && badgeMatch;
     });

package/app/components/canvas/canvas.tsx

@@ -107,7 +107,8 @@ export const Canvas = ({
         caseNumber,
         currentImageId,
         confirmationData,
-        filename
+        filename,
+        updatedAnnotationData
       );
       
       if (success) {

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

@@ -1,52 +1,5 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 120;
-}
-
 .modal {
-  position: relative;
   width: min(560px, calc(100vw - 2rem));
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #d9e0e7;
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
-  padding: 1.1rem;
-}
-
-.title {
-  margin: 0;
-  color: #212529;
-  font-size: 1.02rem;
-}
-
-.subtitle {
-  margin: 0.4rem 0 0.9rem;
-  color: #6c757d;
-  font-size: 0.85rem;
-}
-
-.warningPanel {
-  border: 1px solid color-mix(in lab, #dc3545 25%, transparent);
-  background: color-mix(in lab, #dc3545 7%, #ffffff);
-  border-radius: 10px;
-  padding: 0.75rem;
-  margin-bottom: 0.8rem;
-}
-
-.warningPanel p {
-  margin: 0;
-  color: #3f2a2e;
-  font-size: 0.86rem;
-  line-height: 1.35;
-}
-
-.warningPanel p + p {
-  margin-top: 0.45rem;
 }
 
 .reasonLabel {
@@ -74,37 +27,8 @@
   box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
 }
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.cancelButton,
-.confirmButton {
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 0.55rem 0.9rem;
-  font-size: 0.86rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.cancelButton {
-  background: #f3f4f6;
-  color: #3c4651;
-  border-color: #d6dce2;
-}
-
 .confirmButton {
   background: #dc3545;
   color: #ffffff;
   border-color: #c82333;
 }
-
-.cancelButton:disabled,
-.confirmButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
 import styles from './archive-case-modal.module.css';
 
 interface ArchiveCaseModalProps {
@@ -65,18 +66,18 @@ export const ArchiveCaseModal = ({
 
   return (
     <div
-      className={styles.overlay}
+      className={sharedStyles.overlay}
       aria-label="Close archive case dialog"
       {...overlayProps}
     >
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Archive Case">
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Archive Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close archive case dialog' })}>
           ×
         </button>
-        <h3 className={styles.title}>Archive Case</h3>
-        <p className={styles.subtitle}>Case: {currentCase}</p>
+        <h3 className={sharedStyles.title}>Archive Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
 
-        <div className={styles.warningPanel}>
+        <div className={sharedStyles.warningPanel}>
           <p>
             Archiving a case permanently renders it read-only.
           </p>
@@ -103,10 +104,10 @@ export const ArchiveCaseModal = ({
           rows={3}
         />
 
-        <div className={styles.actions}>
+        <div className={sharedStyles.actions}>
           <button
             type="button"
-            className={styles.cancelButton}
+            className={sharedStyles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -114,7 +115,7 @@ export const ArchiveCaseModal = ({
           </button>
           <button
             type="button"
-            className={styles.confirmButton}
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
             onClick={() => {
               void handleSubmit();
             }}

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

@@ -0,0 +1,94 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 120;
+}
+
+.modal {
+  position: relative;
+  background: #ffffff;
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
+  padding: 1.1rem;
+}
+
+.title {
+  margin: 0;
+  color: #212529;
+  font-size: 1.02rem;
+}
+
+.subtitle {
+  margin: 0.4rem 0 0.9rem;
+  color: #6c757d;
+  font-size: 0.85rem;
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.92rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
+}
+
+.warningPanel {
+  border: 1px solid color-mix(in lab, #dc3545 25%, transparent);
+  background: color-mix(in lab, #dc3545 7%, #ffffff);
+  border-radius: 10px;
+  padding: 0.75rem;
+  margin-bottom: 0.8rem;
+}
+
+.warningPanel p {
+  margin: 0;
+  color: #3f2a2e;
+  font-size: 0.86rem;
+  line-height: 1.35;
+}
+
+.warningPanel p + p {
+  margin-top: 0.45rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.cancelButton,
+.confirmButton {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.55rem 0.9rem;
+  font-size: 0.86rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cancelButton {
+  background: #f3f4f6;
+  color: #3c4651;
+  border-color: #d6dce2;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

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

@@ -0,0 +1,9 @@
+.modal {
+  width: min(560px, calc(100vw - 2rem));
+}
+
+.confirmButton {
+  background: #dc3545;
+  color: #ffffff;
+  border-color: #c82333;
+}

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

@@ -0,0 +1,79 @@
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
+import styles from './delete-case-modal.module.css';
+
+interface DeleteCaseModalProps {
+  isOpen: boolean;
+  currentCase: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+}
+
+export const DeleteCaseModal = ({
+  isOpen,
+  currentCase,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: DeleteCaseModalProps) => {
+  const isCloseBlocked = isSubmitting;
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className={sharedStyles.overlay}
+      aria-label="Close delete case dialog"
+      {...overlayProps}
+    >
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Delete Case">
+        <button {...getCloseButtonProps({ ariaLabel: 'Close delete case dialog' })}>
+          ×
+        </button>
+
+        <h3 className={sharedStyles.title}>Delete Case</h3>
+        <p className={sharedStyles.subtitle}>Case: {currentCase}</p>
+
+        <div className={sharedStyles.warningPanel}>
+          <p>This action permanently deletes the case and all associated files.</p>
+          <p>This operation cannot be undone.</p>
+          <p>Any image assets that are already missing will be skipped automatically.</p>
+        </div>
+
+        <div className={sharedStyles.actions}>
+          <button
+            type="button"
+            className={sharedStyles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
+            onClick={() => {
+              void onSubmit();
+            }}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Deleting...' : 'Confirm Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -12,7 +12,8 @@
   position: relative;
   width: min(460px, calc(100vw - 2rem));
   background: #ffffff;
-  border-radius: 12px;
+  border-radius: var(--spaceXS);
+  overflow: hidden;
   border: 1px solid #d9e0e7;
   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
   padding: 1.1rem;

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

@@ -1,71 +1,5 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 120;
-}
-
 .modal {
-  position: relative;
   width: min(460px, calc(100vw - 2rem));
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #d9e0e7;
-  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
-  padding: 1.1rem;
-}
-
-.title {
-  margin: 0;
-  color: #212529;
-  font-size: 1.02rem;
-}
-
-.subtitle {
-  margin: 0.4rem 0 0.9rem;
-  color: #6c757d;
-  font-size: 0.85rem;
-}
-
-.input {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid #cdd5dd;
-  border-radius: 8px;
-  padding: 0.6rem 0.75rem;
-  font-size: 0.92rem;
-}
-
-.input:focus {
-  outline: none;
-  border-color: #1f6feb;
-  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.65rem;
-  margin-top: 1rem;
-}
-
-.cancelButton,
-.confirmButton {
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 0.55rem 0.9rem;
-  font-size: 0.86rem;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.cancelButton {
-  background: #f3f4f6;
-  color: #3c4651;
-  border-color: #d6dce2;
 }
 
 .confirmButton {
@@ -73,9 +7,3 @@
   color: #3f2f00;
   border-color: #e8b103;
 }
-
-.cancelButton:disabled,
-.confirmButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import sharedStyles from './case-modal-shared.module.css';
 import styles from './rename-case-modal.module.css';
 
 interface RenameCaseModalProps {
@@ -59,22 +60,22 @@ export const RenameCaseModal = ({
 
   return (
     <div
-      className={styles.overlay}
+      className={sharedStyles.overlay}
       aria-label="Close rename case dialog"
       {...overlayProps}
     >
-      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Rename Case">
+      <div className={`${sharedStyles.modal} ${styles.modal}`} role="dialog" aria-modal="true" aria-label="Rename Case">
         <button {...getCloseButtonProps({ ariaLabel: 'Close rename case dialog' })}>
           ×
         </button>
-        <h3 className={styles.title}>Rename Case</h3>
-        <p className={styles.subtitle}>Current case: {currentCase}</p>
+        <h3 className={sharedStyles.title}>Rename Case</h3>
+        <p className={sharedStyles.subtitle}>Current case: {currentCase}</p>
         <input
           ref={inputRef}
           type="text"
           value={newCaseName}
           onChange={(event) => setNewCaseName(event.target.value)}
-          className={styles.input}
+          className={sharedStyles.input}
           placeholder="New case number"
           disabled={isSubmitting}
           onKeyDown={(event) => {
@@ -83,10 +84,10 @@ export const RenameCaseModal = ({
             }
           }}
         />
-        <div className={styles.actions}>
+        <div className={sharedStyles.actions}>
           <button
             type="button"
-            className={styles.cancelButton}
+            className={sharedStyles.cancelButton}
             onClick={requestClose}
             disabled={isCloseBlocked}
           >
@@ -94,7 +95,7 @@ export const RenameCaseModal = ({
           </button>
           <button
             type="button"
-            className={styles.confirmButton}
+            className={`${sharedStyles.confirmButton} ${styles.confirmButton}`}
             onClick={() => void handleSubmit()}
             disabled={isSubmitting || !newCaseName.trim()}
           >