@striae-org/striae 3.2.1 → 3.3.0

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

@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
+import type React from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router';
 import { Sidebar } from './sidebar';
-import { User } from 'firebase/auth';
-import { FileData } from '~/types';
+import type { User } from 'firebase/auth';
+import { type FileData } from '~/types';
 import styles from './sidebar.module.css';
 import { getAppVersion } from '../../utils/version';
 

package/app/components/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { useState, useCallback } from 'react';
 import styles from './sidebar.module.css';
 import { ManageProfile } from '../user/manage-profile';
@@ -7,7 +7,7 @@ import { CaseSidebar } from './cases/case-sidebar';
 import { NotesSidebar } from './notes/notes-sidebar';
 import { CaseImport } from './case-import/case-import';
 import { Toast } from '../toast/toast';
-import { FileData, ImportResult, ConfirmationImportResult } from '~/types';
+import { type FileData, type ImportResult, type ConfirmationImportResult } from '~/types';
 
 interface SidebarProps {
   user: User;

package/app/components/sidebar/upload/image-upload-zone.tsx

@@ -1,8 +1,8 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import styles from './image-upload-zone.module.css';
 import { uploadFile } from '~/components/actions/image-manage';
-import { FileData } from '~/types';
+import { type FileData } from '~/types';
 
 interface ImageUploadZoneProps {
   user: User;

package/app/components/theme-provider/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { JSX, createContext, useContext } from 'react';
+import { type JSX, createContext, useContext } from 'react';
 import { classes, media } from '~/utils/style';
 import { themes, tokens } from './theme';
 

package/app/components/user/delete-account.tsx

@@ -3,7 +3,7 @@ import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import paths from '~/config/config.json';
 import { getUserApiKey } from '~/utils/auth';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import styles from './delete-account.module.css';
 
 interface DeletionProgress {

package/app/components/user/manage-profile.tsx

@@ -5,8 +5,8 @@ import { DeleteAccount } from './delete-account';
 import { UserAuditViewer } from '../audit/user-audit-viewer';
 import { AuthContext } from '~/contexts/auth.context';
 import { getUserData, updateUserData } from '~/utils/permissions';
-import { auditService } from '~/services/audit.service';
-import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase-errors';
+import { auditService } from '~/services/audit';
+import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
 import { FormField, FormButton, FormMessage } from '../form';
 import { MfaPhoneUpdateSection } from './mfa-phone-update';
 import styles from './manage-profile.module.css';
@@ -234,7 +234,7 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
             <FormButton variant="primary" type="submit" isLoading={isLoading} loadingText="Updating...">
               Update Profile
             </FormButton>
-            <FormButton variant="secondary" type="button" onClick={() => setShowAuditViewer(true)}>
+            <FormButton variant="audit" type="button" onClick={() => setShowAuditViewer(true)}>
               View My Audit Trail
             </FormButton>
             <FormButton variant="secondary" type="button" onClick={() => setShowResetForm(true)}>

package/app/components/user/mfa-phone-update.tsx

@@ -12,9 +12,9 @@ import {
   type MultiFactorResolver,
   type User,
 } from 'firebase/auth';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { auth } from '~/services/firebase';
-import { ERROR_MESSAGES, getValidationError, handleAuthError } from '~/services/firebase-errors';
+import { ERROR_MESSAGES, getValidationError, handleAuthError } from '~/services/firebase/errors';
 import {
   formatPhoneNumberForMfa,
   getMaskedFactorDisplay,
@@ -58,6 +58,7 @@ export const MfaPhoneUpdateSection = ({
   const [recaptchaVerifier, setRecaptchaVerifier] = useState<RecaptchaVerifier | null>(null);
 
   const isMfaBusy = isMfaLoading || isMfaReauthLoading;
+  const hasMfaPhoneInput = mfaPhoneInput.trim().length > 0;
 
   const resetMfaReauthFlow = useCallback(() => {
     setShowMfaReauthPrompt(false);
@@ -665,18 +666,20 @@ export const MfaPhoneUpdateSection = ({
           )}
         </div>
       ) : !isMfaCodeSent ? (
-        <div className={styles.mfaButtonGroup}>
-          <FormButton
-            variant="secondary"
-            type="button"
-            onClick={handleSendMfaVerificationCode}
-            isLoading={isMfaLoading}
-            loadingText="Sending Code..."
-            disabled={!mfaPhoneInput.trim()}
-          >
-            Send Verification Code
-          </FormButton>
-        </div>
+        hasMfaPhoneInput ? (
+          <div className={styles.mfaButtonGroup}>
+            <FormButton
+              variant="secondary"
+              type="button"
+              onClick={handleSendMfaVerificationCode}
+              isLoading={isMfaLoading}
+              loadingText="Sending Code..."
+              disabled={!hasMfaPhoneInput}
+            >
+              Send Verification Code
+            </FormButton>
+          </div>
+        ) : null
       ) : (
         <div className={styles.mfaVerificationSection}>
           <input

package/app/contexts/auth.context.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 
 interface AuthContextType {
   user: User | null;

package/app/root.tsx

@@ -30,8 +30,8 @@ export const links: LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
+  { rel: 'manifest', href: '/manifest.json' },
   { rel: 'icon', href: '/favicon.ico' },
-  { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
 ];
 
 type AppTheme = 'dark' | 'light';
@@ -61,7 +61,7 @@ const resolveRouteTheme = (matches: ReturnType<typeof useMatches>): AppTheme =>
 export function Layout({ children }: { children: React.ReactNode }) {
   const matches = useMatches();
   const theme = resolveRouteTheme(matches);
-  const themeColor = theme === 'dark' ? '#000000' : '#f5f5f5';
+  const themeColor = theme === 'dark' ? '#000000' : '#377087';
 
   return (
     <html lang="en" data-theme={theme}>

package/app/routes/auth/emailActionHandler.tsx

@@ -7,10 +7,10 @@ import {
   verifyPasswordResetCode,
 } from 'firebase/auth';
 import { auth } from '~/services/firebase';
-import { handleAuthError } from '~/services/firebase-errors';
+import { handleAuthError } from '~/services/firebase/errors';
 import { evaluatePasswordPolicy } from '~/utils/password-policy';
 import { getSafeContinuePath } from '~/utils/auth-action-settings';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { Icon } from '~/components/icon/icon';
 import styles from './emailActionHandler.module.css';
 

package/app/routes/auth/emailVerification.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { sendEmailVerification, User } from 'firebase/auth';
-import { auditService } from '~/services/audit.service';
+import { sendEmailVerification, type User } from 'firebase/auth';
+import { auditService } from '~/services/audit';
 import { buildActionCodeSettings } from '~/utils/auth-action-settings';
 import styles from './login.module.css';
 

package/app/routes/auth/login.tsx

@@ -1,50 +1,151 @@
-import { useState, useEffect } from 'react';
-import { Link, useSearchParams } from 'react-router';
+import { useState, useEffect, useRef } from 'react';
+import { Link, useSearchParams, type MetaFunction } from 'react-router';
 import { auth } from '~/services/firebase';
 import {
     signInWithEmailAndPassword, 
     createUserWithEmailAndPassword,
     onAuthStateChanged,
     sendEmailVerification,
-    User,
+  type User,
     updateProfile,
     getMultiFactorResolver,
-    MultiFactorResolver,
-    MultiFactorError
+    type MultiFactorResolver,
+    type MultiFactorError
 } from 'firebase/auth';
 import { PasswordReset } from '~/routes/auth/passwordReset';
 import { EmailVerification } from '~/routes/auth/emailVerification';
 import { EmailActionHandler } from '~/routes/auth/emailActionHandler';
-import { handleAuthError } from '~/services/firebase-errors';
+import { handleAuthError } from '~/services/firebase/errors';
 import { MFAVerification } from '~/components/auth/mfa-verification';
 import { MFAEnrollment } from '~/components/auth/mfa-enrollment';
+import { Toast } from '~/components/toast/toast';
 import { Icon } from '~/components/icon/icon';
 import styles from './login.module.css';
 import { Striae } from '~/routes/striae/striae';
 import { getUserData, createUser } from '~/utils/permissions';
-import { auditService } from '~/services/audit.service';
+import { auditService } from '~/services/audit';
 import { generateUniqueId } from '~/utils/id-generator';
 import { evaluatePasswordPolicy } from '~/utils/password-policy';
 import { buildActionCodeSettings } from '~/utils/auth-action-settings';
 import { userHasMFA } from '~/utils/mfa';
 
-export const meta = () => {
-  const titleText = 'Striae | Welcome to Striae';
-  const description = 'Login to your Striae account to access your projects and data';
+const APP_CANONICAL_ORIGIN = 'https://app.striae.org';
+const SOCIAL_IMAGE_PATH = '/social-image.png';
+const SOCIAL_IMAGE_ALT = 'Striae forensic annotation and comparison workspace';
+const LOGIN_PATH_ALIASES = new Set(['/auth', '/auth/', '/auth/login', '/auth/login/']);
+
+type AuthMetaContent = {
+  title: string;
+  description: string;
+  robots: string;
+};
+
+const getCanonicalPath = (pathname: string): string => {
+  if (!pathname || LOGIN_PATH_ALIASES.has(pathname)) {
+    return '/';
+  }
+
+  return pathname.startsWith('/') ? pathname : `/${pathname}`;
+};
+
+const getAuthMetaContent = (mode: string | null, hasActionCode: boolean): AuthMetaContent => {
+  if (!mode && !hasActionCode) {
+    return {
+      title: 'Striae | Secure Login for Firearms Examiners',
+      description: 'Sign in to Striae to access your forensic annotation workspace, case files, and comparison tools.',
+      robots: 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1',
+    };
+  }
+
+  if (mode === 'resetPassword') {
+    return {
+      title: 'Striae | Reset Your Password',
+      description: 'Use this secure page to reset your Striae account password and restore access to your workspace.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  if (mode === 'verifyEmail') {
+    return {
+      title: 'Striae | Verify Your Email Address',
+      description: 'Confirm your email address to complete Striae account activation and continue securely.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  if (mode === 'recoverEmail') {
+    return {
+      title: 'Striae | Recover Email Access',
+      description: 'Complete your Striae account email recovery steps securely.',
+      robots: 'noindex,nofollow,noarchive',
+    };
+  }
+
+  return {
+    title: 'Striae | Account Action',
+    description: 'Complete your Striae account action securely.',
+    robots: 'noindex,nofollow,noarchive',
+  };
+};
+
+export const meta: MetaFunction = ({ location }) => {
+  const searchParams = new URLSearchParams(location.search);
+  const mode = searchParams.get('mode');
+  const hasActionCode = Boolean(searchParams.get('oobCode'));
+
+  const canonicalPath = getCanonicalPath(location.pathname);
+  const canonicalHref = `${APP_CANONICAL_ORIGIN}${canonicalPath}`;
+  const socialImageHref = `${APP_CANONICAL_ORIGIN}${SOCIAL_IMAGE_PATH}`;
+  const { title, description, robots } = getAuthMetaContent(mode, hasActionCode);
 
   return [
-    { title: titleText },
+    { title },
     { name: 'description', content: description },
+    { name: 'robots', content: robots },
+    { property: 'og:site_name', content: 'Striae' },
+    { property: 'og:type', content: 'website' },
+    { property: 'og:url', content: canonicalHref },
+    { property: 'og:title', content: title },
+    { property: 'og:description', content: description },
+    { property: 'og:image', content: socialImageHref },
+    { property: 'og:image:secure_url', content: socialImageHref },
+    { property: 'og:image:alt', content: SOCIAL_IMAGE_ALT },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:description', content: description },
+    { name: 'twitter:image', content: socialImageHref },
+    { name: 'twitter:image:alt', content: SOCIAL_IMAGE_ALT },
+    { tagName: 'link', rel: 'canonical', href: canonicalHref },
   ];
 };
 
 const SUPPORTED_EMAIL_ACTION_MODES = new Set(['resetPassword', 'verifyEmail', 'recoverEmail']);
 
+const getUserFirstName = (user: User): string => {
+  const displayName = user.displayName?.trim();
+  if (displayName) {
+    const [firstName] = displayName.split(/\s+/);
+    if (firstName) {
+      return firstName;
+    }
+  }
+
+  const emailPrefix = user.email?.split('@')[0]?.trim();
+  if (emailPrefix) {
+    return emailPrefix;
+  }
+
+  return 'User';
+};
+
 export const Login = () => {
   const [searchParams] = useSearchParams();
+  const shouldShowWelcomeToastRef = useRef(false);
 
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
+  const [welcomeToastMessage, setWelcomeToastMessage] = useState('');
+  const [isWelcomeToastVisible, setIsWelcomeToastVisible] = useState(false);
   const [isLogin, setIsLogin] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [isCheckingUser, setIsCheckingUser] = useState(false);
@@ -180,6 +281,12 @@ export const Login = () => {
       
       console.log("User signed in:", currentUser.email);
       setShowMfaEnrollment(false);
+
+      if (shouldShowWelcomeToastRef.current) {
+        setWelcomeToastMessage(`Welcome to Striae, ${getUserFirstName(currentUser)}!`);
+        setIsWelcomeToastVisible(true);
+        shouldShowWelcomeToastRef.current = false;
+      }
       
       // Log successful login audit
       try {
@@ -198,6 +305,8 @@ export const Login = () => {
       setUser(null);
       setShowMfaEnrollment(false);
       setIsCheckingUser(false);
+      setIsWelcomeToastVisible(false);
+      shouldShowWelcomeToastRef.current = false;
     }
   });
 
@@ -339,6 +448,7 @@ export const Login = () => {
       // Don't sign out - let user stay logged in but unverified to see verification screen
     } else {
       // Login
+      shouldShowWelcomeToastRef.current = true;
       try {
         await signInWithEmailAndPassword(auth, email, password);
       } catch (loginError: unknown) {
@@ -356,10 +466,12 @@ export const Login = () => {
           setIsLoading(false);
           return;
         }
+        shouldShowWelcomeToastRef.current = false;
         throw loginError; // Re-throw non-MFA errors
       }
     }
   } catch (err) {
+    shouldShowWelcomeToastRef.current = false;
     const { message } = handleAuthError(err);
     setError(message);
     
@@ -408,6 +520,8 @@ export const Login = () => {
       setShowMfaEnrollment(false);
       setShowMfaVerification(false);
       setMfaResolver(null);
+      setIsWelcomeToastVisible(false);
+      shouldShowWelcomeToastRef.current = false;
     } catch (err) {
       console.error('Sign out error:', err);
     }
@@ -648,6 +762,15 @@ export const Login = () => {
           mandatory={true}
         />
       )}
+
+      {!shouldHandleEmailAction && (
+        <Toast
+          message={welcomeToastMessage}
+          type="success"
+          isVisible={isWelcomeToastVisible}
+          onClose={() => setIsWelcomeToastVisible(false)}
+        />
+      )}
       
     </>
   );

package/app/routes/auth/passwordReset.tsx

@@ -2,8 +2,8 @@ import { useRef, useState } from 'react';
 import { Link } from 'react-router';
 import { sendPasswordResetEmail, signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
-import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase-errors';
-import { auditService } from '~/services/audit.service';
+import { handleAuthError, ERROR_MESSAGES } from '~/services/firebase/errors';
+import { auditService } from '~/services/audit';
 import { buildActionCodeSettings } from '~/utils/auth-action-settings';
 import styles from './passwordReset.module.css';
 

package/app/routes/striae/striae.tsx

@@ -1,4 +1,4 @@
-import { User } from 'firebase/auth';
+import type { User } from 'firebase/auth';
 import { useState, useEffect } from 'react';
 import { SidebarContainer } from '~/components/sidebar/sidebar-container';
 import { Toolbar } from '~/components/toolbar/toolbar';
@@ -9,7 +9,7 @@ import { getNotes, saveNotes } from '~/components/actions/notes-manage';
 import { generatePDF } from '~/components/actions/generate-pdf';
 import { getUserApiKey } from '~/utils/auth';
 import { resolveEarliestAnnotationTimestamp } from '~/utils/annotation-timestamp';
-import { AnnotationData, FileData } from '~/types';
+import { type AnnotationData, type FileData } from '~/types';
 import { checkCaseIsReadOnly } from '~/components/actions/case-manage';
 import paths from '~/config/config.json';
 import styles from './striae.module.css';

package/app/services/audit/audit-console-logger.ts

@@ -0,0 +1,46 @@
+import { type ValidationAuditEntry } from '~/types';
+
+export const getAuditSecurityIssuesForConsole = (
+  entry: ValidationAuditEntry
+): string[] => {
+  const checks = entry.details.securityChecks;
+  if (!checks) {
+    return [];
+  }
+
+  const securityIssues = [];
+
+  // For console diagnostics, self-confirmation is relevant for import actions only.
+  if (entry.action === 'import' && checks.selfConfirmationPrevented === true) {
+    securityIssues.push('selfConfirmationPrevented');
+  }
+
+  if (checks.fileIntegrityValid === false) {
+    securityIssues.push('fileIntegrityValid');
+  }
+
+  if (checks.exporterUidValidated === false) {
+    securityIssues.push('exporterUidValidated');
+  }
+
+  return securityIssues;
+};
+
+export const logAuditEntryToConsole = (entry: ValidationAuditEntry): void => {
+  const icon = entry.result === 'success' ? '✅' :
+    entry.result === 'failure' ? '❌' : '⚠️';
+
+  console.log(
+    `${icon} Audit [${entry.action.toUpperCase()}]: ${entry.details.fileName} ` +
+    `(Case: ${entry.details.caseNumber || 'N/A'}) - ${entry.result.toUpperCase()}`
+  );
+
+  if (entry.details.validationErrors.length > 0) {
+    console.log('   Errors:', entry.details.validationErrors);
+  }
+
+  const securityIssues = getAuditSecurityIssuesForConsole(entry);
+  if (securityIssues.length > 0) {
+    console.warn('   Security Issues:', securityIssues);
+  }
+};

package/app/services/audit/audit-export-csv.ts

@@ -0,0 +1,126 @@
+import { type ValidationAuditEntry } from '~/types';
+
+export const AUDIT_CSV_ENTRY_HEADERS = [
+  'Timestamp',
+  'User Email',
+  'Action',
+  'Result',
+  'File Name',
+  'File Type',
+  'Case Number',
+  'Confirmation ID',
+  'Original Examiner UID',
+  'Reviewing Examiner UID',
+  'File ID',
+  'Original Filename',
+  'File Size (MB)',
+  'MIME Type',
+  'Upload Method',
+  'Delete Reason',
+  'Annotation ID',
+  'Annotation Type',
+  'Annotation Tool',
+  'Session ID',
+  'User Agent',
+  'Processing Time (ms)',
+  'Hash Valid',
+  'Validation Errors',
+  'Security Issues',
+  'Workflow Phase',
+  'Profile Field',
+  'Old Value',
+  'New Value',
+  'Total Confirmations In File',
+  'Confirmations Successfully Imported',
+  'Validation Steps Failed',
+  'Case Name',
+  'Total Files',
+  'MFA Method',
+  'Security Incident Type',
+  'Security Severity'
+];
+
+export const formatForCSV = (value?: string | number | null): string => {
+  if (value === undefined || value === null) return '';
+  const str = String(value);
+  if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+};
+
+const getSecurityIssues = (entry: ValidationAuditEntry): string => {
+  const securityChecks = entry.details.securityChecks;
+  if (!securityChecks) {
+    return '';
+  }
+
+  const issues = [];
+
+  if (securityChecks.selfConfirmationPrevented === true) {
+    issues.push('selfConfirmationPrevented');
+  }
+
+  if (securityChecks.fileIntegrityValid === false) {
+    issues.push('fileIntegrityValid');
+  }
+
+  if (securityChecks.exporterUidValidated === false) {
+    issues.push('exporterUidValidated');
+  }
+
+  return issues.join('; ');
+};
+
+export const entryToCSVRow = (entry: ValidationAuditEntry): string => {
+  const fileDetails = entry.details.fileDetails;
+  const annotationDetails = entry.details.annotationDetails;
+  const sessionDetails = entry.details.sessionDetails;
+  const userProfileDetails = entry.details.userProfileDetails;
+  const caseDetails = entry.details.caseDetails;
+  const performanceMetrics = entry.details.performanceMetrics;
+  const securityDetails = entry.details.securityDetails;
+  const securityIssues = getSecurityIssues(entry);
+
+  const values = [
+    formatForCSV(entry.timestamp),
+    formatForCSV(entry.userEmail),
+    formatForCSV(entry.action),
+    formatForCSV(entry.result),
+    formatForCSV(entry.details.fileName),
+    formatForCSV(entry.details.fileType),
+    formatForCSV(entry.details.caseNumber),
+    formatForCSV(entry.details.confirmationId),
+    formatForCSV(entry.details.originalExaminerUid),
+    formatForCSV(entry.details.reviewingExaminerUid),
+    formatForCSV(fileDetails?.fileId),
+    formatForCSV(fileDetails?.originalFileName),
+    fileDetails?.fileSize ? (fileDetails.fileSize / 1024 / 1024).toFixed(2) : '',
+    formatForCSV(fileDetails?.mimeType),
+    formatForCSV(fileDetails?.uploadMethod),
+    formatForCSV(fileDetails?.deleteReason),
+    formatForCSV(annotationDetails?.annotationId),
+    formatForCSV(annotationDetails?.annotationType),
+    formatForCSV(annotationDetails?.tool),
+    formatForCSV(sessionDetails?.sessionId),
+    formatForCSV(sessionDetails?.userAgent),
+    performanceMetrics?.processingTimeMs || '',
+    entry.details.hashValid !== undefined ? (entry.details.hashValid ? 'Yes' : 'No') : '',
+    formatForCSV(entry.details.validationErrors?.join('; ')),
+    formatForCSV(securityIssues),
+    formatForCSV(entry.details.workflowPhase),
+    formatForCSV(userProfileDetails?.profileField),
+    formatForCSV(userProfileDetails?.oldValue),
+    formatForCSV(userProfileDetails?.newValue),
+    caseDetails?.totalAnnotations?.toString() || '',
+    performanceMetrics?.validationStepsCompleted?.toString() || '',
+    performanceMetrics?.validationStepsFailed?.toString() || '',
+    formatForCSV(caseDetails?.newCaseName || caseDetails?.oldCaseName),
+    caseDetails?.totalFiles?.toString() || '',
+    formatForCSV(securityDetails?.mfaMethod),
+    formatForCSV(securityDetails?.incidentType),
+    formatForCSV(securityDetails?.severity)
+  ];
+
+  return values.join(',');
+};