@striae-org/striae 4.2.0 → 4.3.0

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS  
 
-   Striae © 2025. All rights reserved.
+   © 2025 Stephen J. Lu
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

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

@@ -11,9 +11,10 @@ import {
   deleteCaseData,
   duplicateCaseData,
   deleteFileAnnotations,
-  signForensicManifest
+  signForensicManifest,
+  removeCaseConfirmationSummary
 } from '~/utils/data';
-import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail } from '~/types';
+import { type CaseData, type ReadOnlyCaseData, type FileData, type AuditTrail, type CaseExportData } from '~/types';
 import { auditService } from '~/services/audit';
 import { fetchImageApi } from '~/utils/api';
 import { exportCaseData, formatDateForFilename } from '~/components/actions/case-export';
@@ -569,6 +570,13 @@ export const deleteCase = async (user: User, caseNumber: string): Promise<Delete
       // Delete case data using centralized function (skip validation since user no longer has access)
       await deleteCaseData(user, caseNumber, { skipValidation: true });
 
+      // Clean up confirmation status metadata for this case
+      try {
+        await removeCaseConfirmationSummary(user, caseNumber);
+      } catch (summaryError) {
+        console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+      }
+
       // Add a small delay before audit logging to reduce rate limiting
       await new Promise(resolve => setTimeout(resolve, 100));
 
@@ -593,6 +601,13 @@ export const deleteCase = async (user: User, caseNumber: string): Promise<Delete
     // Delete case data using centralized function (skip validation since user no longer has access)
     await deleteCaseData(user, caseNumber, { skipValidation: true });
 
+    // Clean up confirmation status metadata for this case
+    try {
+      await removeCaseConfirmationSummary(user, caseNumber);
+    } catch (summaryError) {
+      console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+    }
+
     // Add a small delay before audit logging to reduce rate limiting
     await new Promise(resolve => setTimeout(resolve, 100));
 
@@ -736,22 +751,19 @@ export const archiveCase = async (
       isReadOnly: true,
     } as CaseData;
 
-    await updateCaseData(user, caseNumber, archiveData);
-
-    await auditService.logCaseArchive(
-      user,
-      caseNumber,
-      caseNumber,
-      archiveReason?.trim() || 'No reason provided',
-      'success',
-      [],
-      archiveData.files?.length || 0,
-      archivedAt,
-      Date.now() - startTime
-    );
-
     const exportData = await exportCaseData(user, caseNumber, { includeMetadata: true });
-    const caseJsonContent = JSON.stringify(exportData, null, 2);
+    const archivedExportData: CaseExportData = {
+      ...exportData,
+      metadata: {
+        ...exportData.metadata,
+        archived: true,
+        archivedAt,
+        archivedBy: user.uid,
+        archivedByDisplay,
+        archiveReason: archiveReason?.trim() || undefined,
+      },
+    };
+    const caseJsonContent = JSON.stringify(archivedExportData, null, 2);
 
     const JSZip = (await import('jszip')).default;
     const zip = new JSZip();
@@ -876,6 +888,27 @@ export const archiveCase = async (
       compressionOptions: { level: 6 },
     });
 
+    await updateCaseData(user, caseNumber, archiveData);
+
+    // Clean up confirmation status metadata for this archived case
+    try {
+      await removeCaseConfirmationSummary(user, caseNumber);
+    } catch (summaryError) {
+      console.warn(`Failed to remove confirmation summary for case ${caseNumber}:`, summaryError);
+    }
+
+    await auditService.logCaseArchive(
+      user,
+      caseNumber,
+      caseNumber,
+      archiveReason?.trim() || 'No reason provided',
+      'success',
+      [],
+      archiveData.files?.length || 0,
+      archivedAt,
+      Date.now() - startTime
+    );
+
     const downloadUrl = URL.createObjectURL(zipBlob);
     const archiveFileName = `striae-case-${caseNumber}-archive-${formatDateForFilename(new Date())}.zip`;
     const anchor = document.createElement('a');

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

@@ -15,8 +15,11 @@ export const AuditEntriesList = ({ entries }: AuditEntriesListProps) => {
           <p>No activities match the current filters.</p>
         </div>
       ) : (
-        entries.map((entry, index) => (
-          <div key={index} className={`${styles.entry} ${styles[entry.result]}`}>
+        entries.map((entry) => (
+          <div
+            key={`${entry.timestamp}-${entry.userId}-${entry.action}-${entry.details.fileName || ''}`}
+            className={`${styles.entry} ${styles[entry.result]}`}
+          >
             <div className={styles.entryHeader}>
               <div className={styles.entryIcons}>
                 <span className={styles.actionIcon}>{getAuditActionIcon(entry.action)}</span>

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

@@ -112,10 +112,13 @@ export const useAuditViewerData = ({
 
       if (effectiveCaseNumber) {
         const caseData = await getCaseData(user, effectiveCaseNumber);
-        const archivedReadOnlyCase = Boolean(caseData?.isReadOnly && caseData.archived === true);
-        setIsArchivedReadOnlyCase(archivedReadOnlyCase);
+        const isArchiveBundleCase = Boolean(
+          caseData?.archived === true &&
+          caseData?.bundledAuditTrail?.source === 'archive-bundle'
+        );
+        setIsArchivedReadOnlyCase(isArchiveBundleCase);
 
-        if (archivedReadOnlyCase && !caseData?.bundledAuditTrail?.entries?.length) {
+        if (isArchiveBundleCase && !Array.isArray(caseData?.bundledAuditTrail?.entries)) {
           setBundledAuditWarning(
             'This imported archived case does not include bundled audit trail data. No audit entries are available for this case.'
           );

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,
-      'csv'
+      'json'
     );
 
     try {

package/app/components/canvas/confirmation/confirmation.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, useRef } from 'react';
 import { type ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
 import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
@@ -33,6 +33,7 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
   const [badgeId, setBadgeId] = useState('');
   const [error, setError] = useState('');
   const [isConfirming, setIsConfirming] = useState(false);
+  const wasOpenRef = useRef(false);
   
   const fullName = user?.displayName || user?.email || 'Unknown User';
   const userEmail = user?.email || 'No email available';
@@ -54,7 +55,10 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, default
 
   // Reset form when modal opens
   useEffect(() => {
-    if (isOpen) {
+    const justOpened = isOpen && !wasOpenRef.current;
+    wasOpenRef.current = isOpen;
+
+    if (justOpened) {
       if (existingConfirmation) {
         setBadgeId(existingConfirmation.badgeId);
       } else {

package/app/components/colors/colors.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  width: fit-content;
 }
 
 .colorHeader {
@@ -26,7 +27,7 @@
 }
 
 .colorWheel {
-  width: 100%;
+  width: 180px;
   height: 40px;
   padding: 0;
   border: 2px solid #ced4da;
@@ -55,5 +56,5 @@
 
 .colorSwatch.selected {
   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);
+}

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()}
           >