@striae-org/striae 4.0.3 → 4.2.0

package/app/components/navbar/navbar.tsx

@@ -0,0 +1,377 @@
+import { useEffect, useRef, useState, useContext } from 'react';
+import styles from './navbar.module.css';
+import { SignOut } from '../actions/signout';
+import { ManageProfile } from '../user/manage-profile';
+import { CaseImport } from '../sidebar/case-import/case-import';
+import { PublicSigningKeyModal } from '~/components/public-signing-key-modal/public-signing-key-modal';
+import { getCurrentPublicSigningKeyDetails } from '~/utils/forensics';
+import { AuthContext } from '~/contexts/auth.context';
+import { getUserData } from '~/utils/data';
+import { type ImportResult, type ConfirmationImportResult } from '~/types';
+
+interface NavbarProps {
+  isUploading?: boolean;
+  company?: string;
+  isReadOnly?: boolean;
+  currentCase?: string;
+  currentFileName?: string;
+  isCurrentImageConfirmed?: boolean;
+  hasLoadedCase?: boolean;
+  hasLoadedImage?: boolean;
+  onImportComplete?: (result: ImportResult | ConfirmationImportResult) => void;
+  onOpenCase?: () => void;
+  onOpenListAllCases?: () => void;
+  onOpenCaseExport?: () => void;
+  onOpenAuditTrail?: () => void;
+  onOpenRenameCase?: () => void;
+  onDeleteCase?: () => void;
+  onArchiveCase?: () => void;
+  onOpenViewAllFiles?: () => void;
+  onDeleteCurrentFile?: () => void;
+  onOpenImageNotes?: () => void;
+  archiveDetails?: {
+    archived: boolean;
+    archivedAt?: string;
+    archivedBy?: string;
+    archivedByDisplay?: string;
+    archiveReason?: string;
+  };
+}
+
+export const Navbar = ({
+  isUploading = false,
+  company,
+  isReadOnly = false,
+  currentCase,
+  currentFileName,
+  isCurrentImageConfirmed = false,
+  hasLoadedCase = false,
+  hasLoadedImage = false,
+  onImportComplete,
+  onOpenCase,
+  onOpenListAllCases,
+  onOpenCaseExport,
+  onOpenAuditTrail,
+  onOpenRenameCase,
+  onDeleteCase,
+  onArchiveCase,
+  onOpenViewAllFiles,
+  onDeleteCurrentFile,
+  onOpenImageNotes,
+  archiveDetails,
+}: NavbarProps) => {
+  const { user } = useContext(AuthContext);
+  const [userBadgeId, setUserBadgeId] = useState<string>('');
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [isPublicKeyModalOpen, setIsPublicKeyModalOpen] = useState(false);
+  const [isCaseMenuOpen, setIsCaseMenuOpen] = useState(false);
+  const [isFileMenuOpen, setIsFileMenuOpen] = useState(false);
+  const { keyId: publicSigningKeyId, publicKeyPem } = getCurrentPublicSigningKeyDetails();
+  const caseMenuRef = useRef<HTMLDivElement>(null);
+  const fileMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const loadUserBadgeId = async () => {
+      if (user) {
+        try {
+          const userData = await getUserData(user);
+          if (userData?.badgeId) {
+            setUserBadgeId(userData.badgeId);
+          }
+        } catch (err) {
+          console.error('Failed to load user badge ID:', err);
+        }
+      }
+    };
+
+    loadUserBadgeId();
+  }, [user]);
+
+  useEffect(() => {
+    if (!isCaseMenuOpen && !isFileMenuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const targetNode = event.target as Node;
+      const clickedOutsideCaseMenu = !caseMenuRef.current?.contains(targetNode);
+      const clickedOutsideFileMenu = !fileMenuRef.current?.contains(targetNode);
+
+      if (clickedOutsideCaseMenu) {
+        setIsCaseMenuOpen(false);
+      }
+
+      if (clickedOutsideFileMenu) {
+        setIsFileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+    };
+  }, [isCaseMenuOpen, isFileMenuOpen]);
+
+  const caseActionsDisabled = false;
+  const isCaseManagementActive = true;
+  const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
+  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed;
+  const isImageNotesActive = canOpenImageNotes;
+  const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
+
+  return (
+    <>
+      <header className={styles.navbar} aria-label="Canvas top navigation">
+        <div className={styles.companyLabelContainer}>
+          <div className={styles.companyLabel}>
+            {isReadOnly ? 'CASE REVIEW ONLY' : `${company}${user?.displayName ? ` | ${user.displayName}` : ''}${userBadgeId ? `, ${userBadgeId}` : ''}`}
+          </div>
+        </div>
+        <div className={styles.navCenterTrack}>
+          <div className={styles.navCentral}>
+          <div className={styles.caseMenuContainer} ref={caseMenuRef}>
+            <button
+              type="button"
+              className={`${styles.navSectionButton} ${isCaseManagementActive ? styles.navSectionButtonActive : ''}`}
+              aria-pressed={isCaseManagementActive}
+              aria-expanded={isCaseMenuOpen}
+              aria-haspopup="menu"
+              disabled={caseActionsDisabled}
+              onClick={() => setIsCaseMenuOpen((prev) => !prev)}
+              title={isUploading ? 'Cannot access case actions while uploading' : undefined}
+            >
+              Case Management
+            </button>
+            {isCaseMenuOpen && (
+              <div className={styles.caseMenu} role="menu" aria-label="Case Management actions">
+                <div className={styles.caseMenuSectionLabel}>Case Access</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemOpen}`}
+                  onClick={() => {
+                    onOpenCase?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Open Case
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemList}`}
+                  onClick={() => {
+                    onOpenListAllCases?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  List All Cases
+                </button>
+                <div className={styles.caseMenuSectionLabel}>Case Operations</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
+                  disabled={!hasLoadedCase}
+                  title={!hasLoadedCase ? 'Load a case to export case data' : undefined}
+                  onClick={() => {
+                    onOpenCaseExport?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Export Case Data
+                </button>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemAudit}`}
+                  disabled={!hasLoadedCase}
+                  title={!hasLoadedCase ? 'Load a case to view audit trail' : undefined}
+                  onClick={() => {
+                    onOpenAuditTrail?.();
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Case Audit Trail
+                </button>
+                {(!isReadOnly || archiveDetails?.archived) && (
+                  <div className={styles.caseMenuSectionLabel}>Maintenance</div>
+                )}
+                {!isReadOnly && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemRename}`}
+                    disabled={!hasLoadedCase}
+                    title={!hasLoadedCase ? 'Load a case to rename it' : undefined}
+                    onClick={() => {
+                      onOpenRenameCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Rename Case
+                  </button>
+                )}
+                {(!isReadOnly || archiveDetails?.archived) && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemDelete}`}
+                    disabled={!hasLoadedCase}
+                    title={!hasLoadedCase ? 'Load a case to delete it' : undefined}
+                    onClick={() => {
+                      onDeleteCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Delete Case
+                  </button>
+                )}
+                {!isReadOnly && (
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className={`${styles.caseMenuItem} ${styles.caseMenuItemArchive}`}
+                    disabled={!hasLoadedCase}
+                    title={!hasLoadedCase ? 'Load a case to archive it' : undefined}
+                    onClick={() => {
+                      onArchiveCase?.();
+                      setIsCaseMenuOpen(false);
+                    }}
+                  >
+                    Archive Case
+                  </button>
+                )}
+                <div className={styles.caseMenuSectionLabel}>Verification</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.caseMenuItem} ${styles.caseMenuItemKey}`}
+                  onClick={() => {
+                    setIsPublicKeyModalOpen(true);
+                    setIsCaseMenuOpen(false);
+                  }}
+                >
+                  Verify Exports
+                </button>
+                {currentCase && (
+                  <div className={styles.caseMenuCaption}>Case: {currentCase}</div>
+                )}
+                {archiveDetails?.archived && (
+                  <div className={styles.caseArchiveDetails}>
+                    <strong>Archived Case</strong>
+                    <span>Archived At: {archiveDetails.archivedAt ? new Date(archiveDetails.archivedAt).toLocaleString() : 'Unknown'}</span>
+                    <span>
+                      Archived By (Name, ID): {archiveDetails.archivedByDisplay || archiveDetails.archivedBy || 'Unknown'}
+                      {archiveDetails.archivedByDisplay && archiveDetails.archivedBy ? ` (${archiveDetails.archivedBy})` : ''}
+                    </span>
+                    <span>Reason: {archiveDetails.archiveReason || 'Not provided'}</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className={styles.fileMenuContainer} ref={fileMenuRef}>
+            <button
+              type="button"
+              className={`${styles.navSectionButton} ${isFileManagementActive ? styles.navSectionButtonActive : ''}`}
+              disabled={!hasLoadedCase}
+              aria-pressed={isFileManagementActive}
+              aria-expanded={isFileMenuOpen}
+              aria-haspopup="menu"
+              onClick={() => setIsFileMenuOpen((prev) => !prev)}
+              title={!hasLoadedCase ? 'Load a case to enable file management' : undefined}
+            >
+              File Management
+            </button>
+            {isFileMenuOpen && (
+              <div className={styles.fileMenu} role="menu" aria-label="File Management actions">
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.fileMenuItem} ${styles.fileMenuItemViewAll}`}
+                  onClick={() => {
+                    onOpenViewAllFiles?.();
+                    setIsFileMenuOpen(false);
+                  }}
+                >
+                  View All Files
+                </button>
+                <div className={styles.fileMenuSectionLabel}>Selected File</div>
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={`${styles.fileMenuItem} ${styles.fileMenuItemDelete}`}
+                  disabled={!canDeleteCurrentFile}
+                  title={!hasLoadedImage ? 'Load an image to delete the selected file' : isReadOnly ? 'Cannot delete files for read-only cases' : undefined}
+                  onClick={() => {
+                    onDeleteCurrentFile?.();
+                    setIsFileMenuOpen(false);
+                  }}
+                >
+                  Delete File
+                </button>
+                <div
+                  className={styles.fileMenuCaption}
+                  title={hasLoadedImage && currentFileName ? currentFileName : 'No file loaded'}
+                >
+                  File: {hasLoadedImage && currentFileName ? currentFileName : 'No file loaded'}
+                </div>
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className={`${styles.navSectionButton} ${isImageNotesActive ? styles.navSectionButtonActive : ''}`}
+            disabled={!canOpenImageNotes}
+            aria-pressed={isImageNotesActive}
+            title={!hasLoadedImage ? 'Load an image to enable image notes' : isCurrentImageConfirmed ? 'Confirmed images are read-only and viewable via toolbar only' : undefined}
+            onClick={() => {
+              onOpenImageNotes?.();
+            }}
+          >
+            Image Notes
+          </button>
+          <button
+            type="button"
+            onClick={() => setIsImportModalOpen(true)}
+            className={`${styles.navSectionButton} ${styles.navPrimaryButton}`}
+            disabled={isUploading}
+            title={isUploading ? 'Cannot import while uploading files' : undefined}
+          >
+            Import Case/Confirmations
+          </button>
+          </div>
+        </div>
+        <div className={styles.navActions}>
+          <button
+            type="button"
+            onClick={() => setIsProfileModalOpen(true)}
+            className={styles.navTextButton}
+            disabled={isUploading}
+            title={isUploading ? 'Cannot manage profile while uploading files' : undefined}
+          >
+            Manage Profile
+          </button>
+          <SignOut disabled={isUploading} />
+        </div>
+      </header>
+      <CaseImport
+        isOpen={isImportModalOpen}
+        onClose={() => setIsImportModalOpen(false)}
+        onImportComplete={onImportComplete}
+      />
+      <ManageProfile
+        isOpen={isProfileModalOpen}
+        onClose={() => setIsProfileModalOpen(false)}
+      />
+      <PublicSigningKeyModal
+        isOpen={isPublicKeyModalOpen}
+        onClose={() => setIsPublicKeyModalOpen(false)}
+        publicSigningKeyId={publicSigningKeyId}
+        publicKeyPem={publicKeyPem}
+      />
+    </>
+  );
+};

package/app/components/public-signing-key-modal/public-signing-key-modal.module.css

@@ -7,9 +7,11 @@
   align-items: center;
   z-index: var(--zIndex5);
   padding: var(--spaceL);
+  cursor: default;
 }
 
 .modal {
+  position: relative;
   width: 100%;
   max-width: 640px;
   max-height: 90vh;

package/app/components/public-signing-key-modal/public-signing-key-modal.tsx

@@ -5,10 +5,9 @@ import {
   useState,
   type ChangeEvent,
   type DragEvent,
-  type KeyboardEvent,
-  type MouseEvent
 } from 'react';
 import styles from './public-signing-key-modal.module.css';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
 import { verifyExportFile } from '~/utils/forensics';
 
 const NO_PUBLIC_KEY_MESSAGE = 'No public signing key is configured for this environment.';
@@ -230,6 +229,13 @@ export const PublicSigningKeyModal = ({
   const publicSigningKeyTitleId = useId();
   const publicKeyInputId = useId();
   const exportFileInputId = useId();
+  const {
+    overlayProps,
+    getCloseButtonProps
+  } = useOverlayDismiss({
+    isOpen,
+    onClose
+  });
 
   useEffect(() => {
     if (!isOpen) {
@@ -242,45 +248,10 @@ export const PublicSigningKeyModal = ({
     }
   }, [isOpen]);
 
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-
-    const handleEscapeKey = (event: globalThis.KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscapeKey);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [isOpen, onClose]);
-
   if (!isOpen) {
     return null;
   }
 
-  const handleOverlayMouseDown = (event: MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
-    }
-  };
-
-  const handleOverlayKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      onClose();
-    }
-  };
-
   const resetVerificationState = () => {
     setVerificationOutcome(null);
   };
@@ -332,7 +303,7 @@ export const PublicSigningKeyModal = ({
     const lowerName = file.name.toLowerCase();
 
     if (!lowerName.endsWith('.zip') && !lowerName.endsWith('.json')) {
-      setExportFileError('Select a confirmation JSON/ZIP file or a case export ZIP file.');
+      setExportFileError('Select a confirmation JSON/ZIP file, standalone audit JSON export, or a case export ZIP file.');
       return;
     }
 
@@ -346,7 +317,7 @@ export const PublicSigningKeyModal = ({
     const hasExportFile = !!selectedExportFile;
 
     setKeyError(hasPublicKey ? '' : 'Select or download a public key PEM file first.');
-    setExportFileError(hasExportFile ? '' : 'Select a confirmation JSON/ZIP file or a case export ZIP file.');
+    setExportFileError(hasExportFile ? '' : 'Select a confirmation JSON/ZIP file, standalone audit JSON export, or a case export ZIP file.');
 
     if (!hasPublicKey || !hasExportFile || !selectedPublicKey || !selectedExportFile) {
       return;
@@ -379,18 +350,19 @@ export const PublicSigningKeyModal = ({
           return lowerName.includes('confirmation-data-') ? 'Confirmation ZIP' : 'Case export ZIP';
         }
 
-        return 'Confirmation JSON';
+        if (lowerName.includes('audit')) {
+          return 'Audit JSON';
+        }
+
+        return 'JSON export';
       })()} • ${formatFileSize(selectedExportFile.size)}`
     : undefined;
 
   return (
     <div
       className={styles.overlay}
-      onMouseDown={handleOverlayMouseDown}
-      onKeyDown={handleOverlayKeyDown}
-      role="button"
-      tabIndex={0}
       aria-label="Close public signing key dialog"
+      {...overlayProps}
     >
       <div
         className={styles.modal}
@@ -400,13 +372,11 @@ export const PublicSigningKeyModal = ({
       >
         <div className={styles.header}>
           <h3 id={publicSigningKeyTitleId} className={styles.title}>
-            Striae Public Signing Key
+            Striae Verification Utility
           </h3>
           <button
-            type="button"
             className={styles.closeButton}
-            onClick={onClose}
-            aria-label="Close public signing key dialog"
+            {...getCloseButtonProps({ ariaLabel: 'Close public signing key dialog' })}
           >
             &times;
           </button>
@@ -414,7 +384,7 @@ export const PublicSigningKeyModal = ({
 
         <div className={styles.content}>
           <p className={styles.description}>
-            Drop a public key PEM file and a Striae confirmation JSON/ZIP or case export ZIP, then run
+            Drop a public key PEM file and a Striae confirmation JSON/ZIP, standalone audit JSON export, or case export ZIP, then run
             verification directly in the browser.
           </p>
 
@@ -451,8 +421,8 @@ export const PublicSigningKeyModal = ({
               inputId={exportFileInputId}
               label="2. Confirmation File or Export ZIP"
               accept=".json,.zip"
-              emptyText="Drop a confirmation JSON/ZIP or case export ZIP here"
-              helperText="Case exports use .zip. Confirmation exports can be .json or .zip."
+              emptyText="Drop a confirmation JSON/ZIP, audit JSON, or case export ZIP here"
+              helperText="Case exports use .zip. Confirmation exports can be .json or .zip. Audit exports are supported as standalone .json files."
               selectedFileName={selectedExportFile?.name}
               selectedDescription={selectedExportDescription}
               errorMessage={exportFileError}

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

@@ -11,6 +11,7 @@
 }
 
 .modal {
+  position: relative;
   background: var(--backgroundLight);
   border-radius: var(--spaceXS);
   width: 90%;